加载时未检查AngularJS单选按钮答案

【问题标题】：AngularJS radio buttons not checked on load加载时未检查AngularJS单选按钮
【发布时间】：2015-02-11 17:23:08
【问题描述】：

我有一个 angularJS 控制器，它创建一个包含项目列表的范围，并具有所选项目的属性。在初始化期间，我创建列表并将 selectedItem 属性设置为列表中的第二项。

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 设置为第三项，并且单选按钮将相应更新。

这是一个演示该问题的 plunker。

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

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您的 html 模板中的 ng-value 属性有错字，应该是

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

【讨论】：

嗯，我不敢相信我错过了。谢谢！