Question

我从一个看起来像这样的资源回来了一些数据：

$scope.phones = [
    {
        Value: <some value>,
        IsDefault: true
    },
    {
        Value: <some value>
        IsDefault: false
    }
];

为简单起见，这里是转发器：

<div ng-repeat="phone in phones">
    <input type="radio" name="phone" ng-model="phone.IsDefault" />
</div>

我希望检查哪个无线电相应地更新模型 - 这不会发生。在页面加载时，不会检查任何内容。我可以使用ng-checked - 但没有ng-model它不会绑定回数组。我是否遗漏了一些简单的内容，或者我是否因为编写ng-change事件而无法手动更新数组？

截至目前，我还撰写了ng-change事件，目前看起来像是：

ng-model="phone.IsDefault" ng-value="true" ng-change="newPhoneSelected($index)"

$scope.newPhoneSelected = function (index) {
    for (var i = 0; i < $scope.phones.length; i++) {
        if (i == index) $scope.phones[i].IsDefault = true;
        else $scope.phones[i].IsDefault = false;
    }
}

Answer 1

您缺少ng-value ...它们是基于value工作的单选按钮，用于将值标记为已选中。您需要[value="" | ng-value=""]

<input type="radio"
       ng-model=""
       [value="" |
       ng-value=""]>

像：

 <input type="radio" ng-value="true" name="boolean" ng-model="myValue" /> True
 <input type="radio" ng-value="false" name="boolean"  ng-model="myValue" /> False

这是plunker demo

或使用字符串值：

$scope.myValue = 'Car'

<强> HTML

 <input type="radio" ng-value="'Car'" name="string1" ng-model="myValue" /> Car
 <input type="radio" ng-value="'Airplane'" name="string1"  ng-model="myValue" /> Airplane

以下是second demo

这可能是您最接近的样本：

http://jsfiddle.net/JbMuD/

Answer 2

单选按钮用于从多个值中选择一个。您想要更改一个项目（isDefault = true）的属性，同时更改另一个项目（isDefault = false）的属性。

语义上正确的方法是拥有某种defaultPhone值：

<div ng-repeat="phone in phones">
  <input type="radio" name="phone" ng-model="temp.defaultPhone" ng-value="phone"/>
</div>

由于您的模型要求每部手机都知道＆＃34;它本身是默认的，你可以添加一个监听器：

$scope.$watch('temp.defaultPhone', function(defaultPhone) {
  $scope.phones.forEach(function(phone) {
    phone.isDefault = phone === defaultPhone;
  });
});

这里是working example。

Angular - 绑定到ng-repeat的ng-model复选框

2 个答案: