AngularJS单选按钮没有在加载时被检查

问题描述：

我有一个angularJS控制器，它创建一个带有项目列表的范围并且具有所选项目的属性。在初始化期间，我创建列表并将selectedItem属性设置为列表中的第二项。AngularJS单选按钮没有在加载时被检查

app.controller('MainCtrl', function($scope) { 
    $scope.items = [ 
    {id: 1, name: "Item 1"}, 
    {id: 2, name: "Item 2"}, 
    {id: 3, name: "Item 3"} 
    ]; 

    $scope.selectedItem = $scope.items[1]; 
});

该视图是一个带有每个项目的复选框的列表。

<body ng-controller="MainCtrl"> 
    <div ng-repeat="item in items"> 
     <label> 
     <input type="radio" ng-model="$parent.selectedItem" ng-value="{{item}}" ng-checked="$parent.selectedItem==item"> 
     {{item.name}} 
     </label> 
    </div> 
    Selected Value: {{selectedItem}} 
    <div> 
     <button ng-click="selectedItem=items[2]">Select 3</button> 
    </div> 
    </body>

除了第二个单选按钮在视图加载时不显示为选中状态时，一切正常工作。选择一个单选按钮会按预期更改selectedItem。我还添加了一个按钮来演示可以将selectedItem设置为第三项，并单选按钮将相应更新。

这是一个演示该问题的解决方案。

http://plnkr.co/edit/1TbpHgFm5kpa9k3OJtbI?p=preview

答

你必须为NG-value属性的HTML模板错字，应该是

 <label> 
     <input type="radio" ng-model="$parent.selectedItem" ng-value="item"> 
     {{item.name}} 
     </label>

好废话，我无法相信我错过了。谢谢！ – DanielC 2015-02-11 17:32:50

AngularJS单选按钮没有在加载时被检查

相关推荐