javascript - input[radio] 与 ng-model 和 ng-value 的对象相等性比较

Question

首先让我说这个问题与 <select> 中的选择问题非常相似使用 ng-options 标记。例如，Working with select using AngularJS's ng-options .具体问题是比较一个对象的两个不同实例，这两个实例的引用不相等，但逻辑上表示相同的数据。

为了演示，假设我们在模型中有以下选项数组和选定的选项变量:

$scope.items = [
   {ID: 1, Label: 'Foo', Extra: 17},
   {ID: 2, Label: 'Bar', Extra: 18},
   {ID: 3, Label: 'Baz', Extra: 19}
];
$scope.selectedItem = {ID: 1, Label: 'Foo'};

请注意，以上对象仅用于演示。我特意放弃了 selectedItem 上的“额外”属性以表明有时我的模型对象在其特定属性上有所不同。重要的是我想在 ID 属性上进行比较。我有一个 equals()在我的真实对象上运行，比较原型(prototype)“类”和 ID。

然后在 View 中:

<label class="radio inline" ng-repeat="item in items">
    <input type="radio" ng-model="selectedItem" ng-value="item"> {{item.Label}}
</label>

现在，这里的问题是“Foo”的单选按钮不会开始被选中，因为 Angular 正在对对象使用引用相等性。如果我将范围中的最后一行更改为以下内容，一切都会按预期进行。

$scope.selectedItem = items[0];

但是，我遇到的问题是，在我的应用程序中，我并不是简单地在范围内声明这两个简单的变量。相反，选项列表和绑定(bind)所选选项的数据结构都是使用 $http 从服务器查询的较大 JSON 数据集的一部分。在一般情况下，我很难将数据绑定(bind)的选定属性更改为来 self 的数据查询的等效选项。

所以，我的问题是:在 <select> 的 ng-options 中, angular 提供了一个 track by允许我说类似“object.ID”的表达式，并通知 angular 它应该通过 ID 属性将选定的模型值与选项进行比较。是否有类似的东西可以用于一堆 radio 输入都绑定(bind)到相同的模型属性？理想情况下，我将能够告诉 Angular 使用我自己的自定义 equals() 方法，我已经将其放置在这些模型对象上，该方法检查对象类型和 ID。如果做不到这一点，也可以指定 ID 比较。

Answer 1

我写了一个最简单的指令。使用一种“跟踪”来映射两个不同的对象。查看http://jsfiddle.net/xWWwT/146/ .

HTML

<div ng-app="app">
<div ng-app ng-controller="ThingControl">    
    <ul >
        <li ng-repeat="color in colors">
            <input type="radio" name="color" ng-model="$parent.thing" ng-value="color" radio-track-by="name" />{{ color.name }}
        </li>
    </ul>
    Preview: {{ thing }}
</div>
</div>

JS

var app = angular.module('app', []);

app.controller('ThingControl', function($scope){
    $scope.colors = [
        { name: "White", hex: "#ffffff"},
        { name: "Black", hex: "#000000"},
        { name: "Red", hex: "#000000"},
        { name: "Green", hex: "#000000"}
    ];

    $scope.thing = { name: "White", hex: "#ffffff"};

});

app.directive('radioTrackBy', function(){
return {
        restrict: "A",
        scope: {
            ngModel: "=",
            ngValue: "=",
            radioTrackBy: "@"
        },
        link: function (ng) {   
            if (ng.ngValue[ng.radioTrackBy] === ng.ngModel[ng.radioTrackBy]) {                                
                ng.ngModel = ng.ngValue;
            }
        }
    };
});