我是 Angular JS 的新手,我正在尝试创建一组单选按钮。创建按钮是很容易的部分,但我在弄清楚如何默认选择其中一个而不破坏所有内容时遇到问题。我已经在 Angular 文档和多个其他 stackoverflow 问题中阅读了有关使用 ngChecked 的内容,但似乎仍然不太明白。
我需要做的是当用户访问该页面时预先选择描述之一。价格、折扣和 deal_value 还需要与预选的 Price_option 对象中的值一起显示。
这是我试图开始工作的代码:http://jsfiddle.net/qWzTb/311/
HTML 代码:
<body ng-app="demoApp">
<div ng-controller="DemoController" ng-init="init([{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}])">
<div>
<label ng-repeat="price_option in price_options">
<input type="radio" ng-model="init.price_option" ng-value="price_option" ng-checked="selected_price_option" name="quantity"/>
{{ price_option.qty_description }}
</label>
<ul>
<li>{{ init.price_option.price }}</li>
<li>{{ init.price_option.discount }}</li>
<li>{{ init.price_option.deal_value }}</li>
</ul>
</div>
</div>
</body>
JavaScript:
angular.module('demoApp', []).controller('DemoController', function($scope) {
$scope.init = function(prices) {
$scope.price_options = prices;
$scope.selected_price_option = $scope.price_options[0];
};
});