在ng-value和ng-model(Angularjs）中映射对象

Mapping objects in ng-value and ng-model (Angularjs)

本文关键字：映射 对象 Angularjs ng-value ng-model      更新时间：2023-09-26

之前是这样写的，用于在角度侧显示单选框的旧代码是这样的： 

<label ng-repeat="item in items" class="col-xs-3">
    <input type="radio" name="{{item.name}}"
           value="{{item}}"
           ng-change="saveRadio(x,y,z)"
           ng-model="data[item.name]">
    {{item.name}}
</label>

问题是item是一个对象，并且该函数saveRadio用于将对象保存为文本格式。我们尝试用ng-value替换value，如下所示。现在不会预选保存的答案。代码如下所示：

<label ng-repeat="item in items" class="col-xs-3">
    <input type="radio" name="{{item.name}}"
           ng-value="item"
           ng-change="saveRadio(x,y,z)"
           ng-model="data[item.name]">
    {{item.name}}
</label>

scope变量数据具有答案映射数组。

我在这里遗漏了一些东西，还是还有更多的东西要添加用于对象比较？

想通了这一点，显然ng-model和ng-value可以存储对象，但不做对象比较。添加具有唯一值的 ng-check 将预先选择单选框，如下所示：

<label ng-repeat="item in items" class="col-xs-3">
    <input type="radio" name="{{item.name}}"
           ng-value="item"
           ng-checked="item.option == data[item].option)"
           ng-change="saveRadio(x,y,z)"
           ng-model="data[item.name]">
    {{item.name}}
</label>

您还可以使用此方法实现目标：

$scope.items = [{id:1,name:"first"}];
$scope.savedAnswer = {id:1,name:"first"}; 
var index = $scope.items.map(function(obj, index) {
    if(obj.name == $scope.savedAnswer.name) {
        return index;
    }
}).filter(isFinite);
$scope.preselectedAnswer = $scope.items[index];

视图

<label ng-repeat="item in items" class="col-xs-3">
    <input type="radio" name="{{item.name}}"
           ng-value="item"
           ng-change="saveRadio(x,y,z)"
           ng-model="preselectedAnswer">
    {{item.name}}
</label>

普伦克 ： http://plnkr.co/edit/83atxi7JGtyBSlRqK2xo?p=preview

相关文章：