javascript - 基于属性的 ng-options 模型绑定(bind)

Question

您好，我是 Angular 编程的新手，我对 Angular 的 ng-options 有疑问。

我有一个像

这样的对象结构

TestObj: { name: 'Name1', subNames: ['Subname1'] }
TestArr:
    [{ name: 'Name1', subNames: ['Subname1'] },
    { name: 'Name2', subNames: ['Subname1'] },
    { name: 'Name3', subNames: ['Subname1'] }]

我正在尝试使用 ng-options 将 TestArr 对象之一绑定(bind)到 TestObj。

<select class="touchpoint-settings-create-channel-box ng-model="TestObj" ng-options="curTest.name for curTest in TestArr"></select>

但是，有没有办法让 TestObj 绑定(bind)到 TestArr 中具有相同“名称”属性的对象？

这个 jsfiddle 很好地说明了我的意思。 http://jsfiddle.net/KN9xx/840/

首次启动时，selectedPerson 被设置为类似于数组中第一项的对象，但 ng-options 没有意识到这是同一个对象。

谢谢

Answer 1

我不建议遵循该 jsfiddle 中的示例。本质上，您不需要 TestObj 和 TestArr。如果 TestObj 不仅仅是对 TestArr 的引用，它们就不会是同一个对象，并且您正在复制数据，因为 Angular 和 JavaScript 无法识别这两个对象在它们是单独的对象时具有相同的键和值。

您应该遵循此 SO 帖子中的示例:How to have a default option in Angular.js select box

与其像现在这样使用 TestObj，不如使用 ng-init 来设置默认值。

var TestArr =
    [{ name: 'Name1', subNames: ['Subname1'] },
    { name: 'Name2', subNames: ['Subname1'] },
    { name: 'Name3', subNames: ['Subname1'] }];

<select
  class="touchpoint-settings-create-channel-box
  ng-init="TestObj = options[0]"
  ng-model="TestObj"
  ng-options="option.name for option in TestArr">
</select>

为了说明我对对象的观点:

var obj1 = { name: 'Me' };
var obj2 = { name: 'Me' };

虽然 obj1 和 obj2 看起来完全一样，但变量只是对底层对象的引用，而不是值，JS 解释器不知道我打算让这两个对象相同。但是，如果您使用字符串或数字，它会像您预期的那样工作。

var me = 'Me';
var stillMe = 'Me';

console.log(obj1 === obj2); // prints false
console.log(me === stillMe); // prints true