Question

我正在学习AngularJS，我对选择元素的数据绑定有疑问。文本框的数据绑定在没有任何事件处理代码的情况下工作。设置ng-model属性后，当模型属性更改时，文本框会更新，反之亦然。不需要ng-change属性。

但是，对于select元素，我们需要编写将通过ng-change属性调用的函数。

为什么angularjs在没有文本框的ng-change属性的情况下处理数据绑定，但需要通过选择元素的ng-change属性调用的函数？

更新：在评论部分添加了小提琴。这个例子来自AngularJS in Action book。单击其中一个故事，更改文本框值并更新模型。更改下拉模型中的选择未更新。

更新：在评论中添加了一个新的小提琴。

感谢。

Answer 1

我认为您的混淆可能是select documentation仍然不正确的结果。（请参阅我的Disqus comment。）ng-model可以并且应该与select一起使用。 ng-change是可选的，如果您想在每次选定的选项更改时执行某些操作，它只会为您提供一个挂钩。

通常情况下，您应该使用ng-options选择。

Answer 2

我创造了一个有效的小提琴here - 问题实际上只是虚拟数据。在原始小提琴中，在{name：'Back Log'}和{name：'To Do'}的状态数组中创建的对象与{name：'Back Log'}不同（不是===）和{name：'To Do'}在虚拟故事对象中创建的对象。

为了使示例有效，我将索引状态传递给getStories函数。但是我认为这只是一个由演示引起的混乱的案例。（我一直在关注Angular in Action的MEAP，我认为它可以简化一点like this one，它使用简单的字符串状态来传递=== test

var getStories = function(statusesIndex) {
    var tempArray = [
        {title:'Story 00',
         description:'Description pending.',
        status: statusesIndex['To Do']
        },
        {title:'Story 01',
         description:'Description pending.',
         status: statusesIndex['Back Log']
        }
];
    return tempArray;
}

Answer 3

如果我理解你的问题，那么我认为你的猜测是错误的，因为对于选择框，你不必调用ng-change事件来获取所选的选项。

<select ng-model='select'>
  <option>....</option>
  <option value='one'>One</option>
  <option value='Two'>Two</option>
</select>

// Your selected option will print below... without invoking ng-change
<div>You selected: {{select}}</div>

演示：http://jsfiddle.net/jenxu/1/

AngularJS不一致数据绑定

3 个答案: