使用值作为值语法时，AngularJS选择不绑定 [英] AngularJS select not binding when using value as value syntax

问题描述

我正在尝试使用AngularJS创建一个Select标签.我正在使用ngOptions和ngModel进行数据绑定.

I am trying to create a Select tag using AngularJS. I am using the ngOptions and ngModel for databinding.

现在:如果我有如下数据源:

Now: If let's say I have a data source like follows:

$scope.doesNotBind = [
        {ID: 12, Title: "12 - Does not bind"},  
        {ID: 14, Title: "14 - Does not bind"},  
    ];

$scope.doesNotBindModel = {ID: 14, Title: "14 - Does not bind"};

<select ng-options="value as value.Title for value in doesNotBind" ng-model="doesNotBindModel">
        <option value> </option>
</select>

那将永远不会束缚.但是如果我这样绑定模型，有用！

That will never bind. But if I bind the model like this; it works!

$scope.doesNotBindModel = $scope.doesNotBind[1];

我使用的语法不正确吗?或者这是预期的行为?

Am I using the syntax incorrectly or is this expected behaviour?

我创建了一个POC，以充分证明我在说什么.

I have created a POC to demonstrate fully what I am saying.

JSFiddle POC

有趣的是，当没有as语法(没有对象数据绑定)时，它可以完美运行(同样在演示中)

Interestingly enough, when there is no as syntax (no object data binding), it works perfectly (in demo as well)

谢谢！

我想这是可以预期的，因为他们通过引用eh?

I guess this is expected since they by reference eh?

推荐答案

ngModel是按引用而不是值进行比较.因此，如果您使用ng-options="value as value.Title for value in doesNotBind"，则您的doesNotBindModel必须为:

ngModel compares by reference, not value. So if you use ng-options="value as value.Title for value in doesNotBind", then your doesNotBindModel must be:

JavaScript:

JavaScript:

$scope.doesNotBindModel = $scope.doesNotBind[1];

但是，如果仍然要用JSON表示法设置doesNotBindModel，则可以将track by value.ID添加到ng-options表达式中，如下所示:

However, if you still want to set your doesNotBindModel in JSON notation, you can add track by value.ID to the ng-options expression like this:

HTML:

<select ng-options="value as value.Title for value in doesNotBind track by value.ID"
        ng-model="doesNotBindModel">
</select>

它也可以通过添加track by表达式来工作，但是Angular文档不建议

It also works by adding a track by expression, but it is not recommended by Angular's documentation for ngOptions.

出于此原​​因，请参考以下示例:

For the reason behind this please refer the following example:

HTML:

<select ng-options="item.subItem as item.label for item in values track by item.id" ng-model="selected">
  <option value="">---- not selected ----</option>
</select>

JavaScript:

JavaScript:

$scope.values = [{
  id: 1,
  label: 'aLabel',
  subItem: { name: 'aSubItem' }
}, {
  id: 2,
  label: 'bLabel',
  subItem: { name: 'bSubItem' }
}];

$scope.selected = { name: 'aSubItem' };

为了保留选择，始终将track by表达式应用于数据源的元素(在本示例中为item).要计算是否选择了元素，我们执行以下操作:

With the purpose of preserving the selection, the track by expression is always applied to the element of the data source (to item in this example). To calculate whether an element is selected, we do the following:

1. 将track by应用于数组中的元素.在示例中:[1, 2]
2. 将track by应用于ngModel中已选择的值.

1. Apply track by to the elements in the array. In the example: [1, 2]
2. Apply track by to the already selected value in ngModel.

在示例中:这是不可能的，因为track by指的是item.id，但是从ngModel中选择的值是{name: 'aSubItem'}.因此track by表达式应用于错误的对象，因此找不到所选元素. <select>始终重置为未选中"选项.

In the example: This is not possible, as track by refers to item.id, but the selected value from ngModel is {name: 'aSubItem'}. So the track by expression is applied to a wrong object, the selected element can't be found. <select> is always reset to the "not selected" option.

实时示例: http://plnkr.co/edit/Hu5T1Vo3qTkrDqe5PHJy

这篇关于使用值作为值语法时，AngularJS选择不绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！