Object对输入[单选]与NG-模型和NG-值相等比较 [英] Object equality comparison for input[radio] with ng-model and ng-value

问题描述

让我说，这个问题是非常相似的问题与在＆LT选择启动;选择过夜。例如，在角 NG选项工作。具体问题是在比较两个不同的实例的对象而不是参考相等的，但是在逻辑上重新present相同的数据。

Let me start by saying that this question is very similar to issues with selection in a <select> tag using ng-options. For example, Working with ng-options in angular. The specific problem is comparing two different instances of an object which are not reference equal, but which logically represent the same data.

为了演示，让我们说我们有下面的选项阵列和选择的选项变量模型：

To demonstrate, let's say we have the following array of options and selected option variable in the model:

$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属性进行比较。我有一个等于我这两个原型类和ID进行比较真实对象（）功能。

Note that the above objects are just for demonstration. I specifically left off the 'Extra' property on selectedItem to show that sometimes my model objects differ in their specific properties. The important thing is that I want to compare on the ID property. I have an equals() function on my real objects that compares both prototype 'class' and ID.

然后在视图：

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

现在，这里的问题是，'富'的单选按钮将不会启动选择，因为角度被使用的对象引用相等。如果我改变了最后一行在我的范围以下，一切都将正常工作。

Now, the problem here is that the radio button for 'Foo' will not start selected, because angular is using reference equality for the objects. If I changed the last line in my scope to the below, everything would work as expected.

$scope.selectedItem = items[0];

不过，我遇到的问题是，在我的应用程序，我不能简单地声明范围这两个简单的变量。相反，选项列表和数据结构，其中所选择的选项是被绑定是大套的JSON数据被使用$ HTTP服务器查询两个部分。在一般情况下，这是我很难去改变数据绑定选定的属性是从我的数据查询的等效选项。

But, the problem I'm having is that in my application, I'm not simply declaring these two simple variables in scope. Rather, the options list and the data structure where the selected option are being bound are both part of larger sets of JSON data that are queried from the server using $http. In the general case, it's very difficult for me to go change the data-bound selected property to be the equivalent option from my data query.

所以，我的问题：
在NG-选项＆LT;选择＆GT; ，由的角度提供了一个轨迹EX pression，让我说类似object.ID，并告知角度，它应该选择的模型值比较，通过ID属性的选项。是否有类似的东西，我可以使用一堆无线电输入所有绑定到相同型号的财产？理想情况下，我就可以告诉角度用我自己的自定义equals（）方法，我已经放在这些模型对象的方法，它会检查对象ID类型为好。如果做不到这一点，虽然，能够指定ID比较也将工作。

So, my question: In ng-options for the <select>, angular offers a track by expression that allows me to say something like "object.ID" and inform angular that it should compare the selected model value to the options via the ID property. Is there something similar that I can use for a bunch of radio inputs all bound to the same model property? Ideally, I would be able to tell angular to use my own custom equals() method that I've placed on these model objects, which checks both object type as well as ID. Failing that though, being able to specify ID comparison would also work.

推荐答案

由于OP的要求，这里有一个例子的单选按钮指令，将复杂的对象。它采用 underscore.js 找到从选项中选择的项目。这是一个有点复杂得多，它应该是因为它也支持加载选项，并选择价值与AJAX调用。

As OP requested, here's an example radio button directive that will work with complex objects. It uses underscore.js to find the the selected item from the options. It's a little more complicated than it should be because it also supports loading the options and selected value with AJAX calls.

这篇关于Object对输入[单选]与NG-模型和NG-值相等比较的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！