如何防止AngularJS递归绑定?

How do I prevent AngularJS binding recursively?

本文关键字：绑定 递归 AngularJS 何防止      更新时间：2023-09-26

我有一个select:

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

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

您需要将项目数组和模型分开

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

在您的示例中发生的事情是，一旦您选择AAAAA, p.value现在引用字符列表，并且由于ng-options绑定到相同的$scope属性，下拉列表更新并产生您所看到的结果。

jsfiddle

示例
相关文章：