javascript – 需要默认选择一个Angular JS单选按钮

前端之家收集整理的这篇文章主要介绍了javascript – 需要默认选择一个Angular JS单选按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我是Angular JS的新手,我正在尝试创建一组单选按钮.创建按钮是很容易的部分,但我在确定如何默认选择其中一个而不破坏所有内容时遇到问题.我已经阅读过关于在Angular文档中使用ngChecked以及其他多个stackoverflow问题,但仍然无法解决这个问题.

我需要做的是在用户访问页面时预先选择一个描述. price,discount和deal_value也需要与预选的price_option对象中的值一起显示.

这是我试图开始工作的代码http://jsfiddle.net/qWzTb/311/

HTML代码

dio" ng-model="init.price_option" ng-value="price_option" ng-checked="selected_price_option" name="quantity"/>
              {{ price_option.qty_description }}
           

使用Javascript:

angular.module('demoApp',[]).controller('DemoController',function($scope) {

  $scope.init = function(prices) {
    $scope.price_options = prices;
    $scope.selected_price_option = $scope.price_options[0];
  };
});
最佳答案
HTML

dio" ng-model="$parent.selected_price_option" ng-value="price_option" name="quantity" />{{price_option.qty_description}}

JS

angular.module('demoApp',[]).
controller('DemoController',function ($scope) {
    //moved init logic to controler
    $scope.price_options = [{
        qty: 1,price: 10,qty_description: 'descrip 1',discount: '1%',deal_value: 200
    },{
        qty: 2,price: 7,qty_description: 'descrip 2',discount: '5%',deal_value: 100
    }];
    $scope.selected_price_option = $scope.price_options[1];
});

叉小提琴:http://jsfiddle.net/W8KH7/2/

或者您可以使用对象策略来避免引用$parent:http://jsfiddle.net/W8KH7/3/

原文链接:https://www.f2er.com/html/426849.html

猜你在找的HTML相关文章