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

Question

首先，我要说的是，这个问题与<select>使用ng-options 在标签中进行选择的问题非常相似。例如，使用AngularJS的ng-options使用select。特定的问题是比较对象的两个不同实例，它们的引用不相等，但在逻辑上表示相同的数据。

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

$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'};

请注意，以上对象仅用于演示。我特别保留了“
Extra”属性，selectedItem以表明有时我的模型对象的特定属性有所不同。重要的是我想在ID属性上进行比较。我的equals()真实对象上有一个函数，可以同时比较原型“类”和ID。

然后在视图中：

<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];

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

所以，我的问题是：在的ng-options中<select>，angular提供了一个track by表达式，使我可以说“
object.ID”之类的东西，并通知angular应该通过ID属性将所选模型值与选项进行比较。是否有一些我可以用于绑定到相同模型属性的无线电输入的类似内容？理想情况下，我将能够告诉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;
            }
        }
    };
});