如何防止递归的AngularJS绑定？

Question

我有一个选择：

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

哪里p.value是['AAAAA', 'BBBBB', 'CCCCC']但是当我选择一个选项，选择更新和显示的一样的新选项一堆：

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

我明明结构化的东西错了通过在模型和选项中使用相同的值。什么是正确的做事方式？

Answer 1

您需要的物品的排列和模型

<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 
    }; 
} 

什么在你的例子是发生，一旦是你选择AAAAAp.value分开现在引用字符的列表并且由于ng-options绑定到相同的$scope属性，下拉列表会更新并生成您看到的结果。

Example on jsfiddle