Perché angolare `ng-repeat` ha una diversa casella di controllo per differenziare il comportamento e quindi elencare la casella di controllo manualmente?

Question

Se io elencare le caselle di controllo manualmente

<ul> 
    <li> 
     <input type="checkbox" ng-model="checkState"/> 
    </li> 
    <li> 
     <input type="checkbox" ng-model="checkState"/> 
    </li> 
</ul> 

Controllo una casella di controllo controlla tutta la casella di controllo.

Ma se io uso ng-repeat

<div> 
    <ul> 
     <li ng-repeat="elem in someArray"> 
      <input type="checkbox" ng-model="checkState" /> 
     </li> 
    </ul> 
</div> 

controllando una casella di controllo controlla solo uno di loro

C'è una ragione per questo? Dal DOM entrambi sembrano uguali.

Answer 1

Il problema si riferisce all'angolare scope. Ogni applicazione angolare ha per impostazione predefinita un ambito di base. Può tuttavia avere più ambiti figlio.

Alcune direttive incorporate creano nuovi ambiti figlio. ng-repeat è un esempio di questo. Ogni elemento all'interno di questa direttiva ha il proprio ambito. Quando questi ambiti vengono creati, vengono automaticamente aggiunti come figli dell'ambito principale.

Questo crea una struttura ad albero simile al DOM

rootScope 
    - childScope 
    - childScope 
    - childScope 

Per vedere in azione, check out HTML del browser. Essa sarà simile a questa

<div> 
    <li ng-repeat="elem in someArray" class="ng-scope ng-binding">elem 1 
    <input type="checkbox" ng-model="checkState" /> 
    </li> 
    <li ng-repeat="elem in someArray" class="ng-scope ng-binding">elem 1 
    <input type="checkbox" ng-model="checkState" /> 
    </li> 
</div> 

Si noti che ogni elemento ng-repeat ha un ng-scope e una classe ng-binding.

La direttiva crea un'istanza di modello una volta per elemento da una raccolta. Ogni elemento del modello, in questo caso ogni elemento li ha il proprio ambito.

La direttiva utilizza $watchCollection per rilevare le modifiche nella raccolta. ng-repeat apporta le seguenti modifiche al DOM

• Quando si aggiunge una nuova istanza del modello viene aggiunto al DOM
• Quando un elemento viene rimosso, la sua istanza modello viene rimosso dal nuovo elemento DOM
• Quando gli elementi vengono riordinati, i loro modelli vengono riordinate dal DOM

Ecco la documentazione ufficiale per angolare

https://docs.angularjs.org/api/ng/directive/ngRepeat

https://docs.angularjs.org/guide/scope

Answer 2

Nell'esempio ng-repeat, anche se i modelli hanno tutti lo stesso nome, essi sono ciascuno legato a una portata diversa.

Per ulteriori informazioni, vedere AngularJS Developer Guide - Scope