Wie verhindere ich rekursiv die AngularJS-Bindung?

Question

Ich habe eine select:

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

Wo p.value['AAAAA', 'BBBBB', 'CCCCC'] ist, aber wenn ich die Möglichkeit, die ausgewählten Updates auswählen und zeigt eine neue Reihe von Optionen wie:

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

habe ich offensichtlich falsch strukturiert Dinge indem Sie den gleichen Wert in Modell und Optionen verwenden. Was ist der richtige Weg, um Dinge zu tun?

Answer 1

Sie benötigen das Array von Elementen zu trennen und das Modell

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

Was in Ihrem Beispiel geschieht, ist, sobald Sie AAAAAp.value jetzt verweist auf eine Liste von Zeichen wählen und da ng-options an die gleiche $scope Eigenschaft gebunden ist, wird die Dropdown-Liste aktualisiert und erzeugt Ihr Ergebnis, das Sie sehen.

Example on jsfiddle