Question

我有一个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

Answer 1

你的html模板中有一个关于ng-value属性的拼写错误，它应该是

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

AngularJS单选按钮未加载检查

1 个答案: