Question

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

现在：如果让我说我有一个如下数据源：

$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>

永远不会束缚。但是，如果我像这样绑定模型;有用！

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

我使用的语法不正确还是这种预期的行为？

我已经创建了一个POC来充分展示我的意思。

JSFiddle POC

有趣的是，当没有语法（没有对象数据绑定）时，它完美地工作（在演示中也是如此）

谢谢！

编辑：我猜这是预期的，因为它们是参考eh？

Answer 1

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

JavaScript的：

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

但是，如果您仍想以JSON表示法设置doesNotBindModel，可以将track by value.ID添加到ng-options表达式，如下所示：

HTML：

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

它也可以通过添加track by表达式来实现，但Angular的ngOptions文档不推荐使用它。

由于这背后的原因，请参考以下示例：

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的：

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

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

为了保留选择，track by表达式始终应用于数据源的元素（在此示例中为item）。要计算是否选择了元素，我们执行以下操作：

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

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

实例：http://plnkr.co/edit/Hu5T1Vo3qTkrDqe5PHJy

Answer 2

它不具有约束力，因为两者都是两个不同的对象。

创建对象时，会为其分配单独的内存位置。

var a = {};

var b = {};

如果您检查是否a === b，它将返回false。因为两者都是两个不同的对象。

这就是

的原因

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

不会绑定而

$scope.doesBindModel = $scope.doesBind[3];

因为在后面的情况下，您根据索引引用同一个对象。

使用value作为值语法时，AngularJS选择不绑定

2 个答案: