如何递归阻止AngularJS绑定？

I have a select:

我有一个选择:

<select ng-model="p.value" ng-options="q for q in p.value">
<option value="">Select an animation</option>
</select>

Where p.value is ['AAAAA', 'BBBBB', 'CCCCC'] but when I select an option the select updates and shows a new bunch of options like:

其中p.value是['AAAAA','BBBBB','CCCCC']但是当我选择一个选项时,选择更新并显示一组新的选项,如:

<option>A</option>
<option>A</option>
<option>A</option>
<option>A</option>
<option>A</option>

I've obviously structured things wrong by using the same value in model and options. What is the correct way to do things?

通过在模型和选项中使用相同的值,我显然错误地构造了错误。做事的正确方法是什么?

1 个解决方案

#1

You need to separate the array of items and the model

您需要分离项目数组和模型

<div ng-app ng-controller="MyCtrl">
    <select ng-model="p.selected" ng-options="q for q in p.value">
        <option value="">Select an animation</option>
    </select>
    {{p.selected}}
</div>

function MyCtrl($scope) {

    $scope.p = {
        value: ['AAAAA', 'BBBBB', 'CCCCC'],
        selected : null
    };
}

What is happening in your example is as soon as you select AAAAA p.value now references a list of characters and since ng-options is bound to the same $scope property the drop down list updates and produces your result you are seeing.

您的示例中发生的事情是,只要您选择AAAAA p.value现在引用字符列表,并且因为ng-options绑定到相同的$ scope属性,下拉列表会更新并生成您看到的结果。

Example on jsfiddle

关于jsfiddle的例子

#1