Essayer de déclencher une fonction sur les boutons répétés ng, mais la fonction get déclenchée sur tous les boutons répétés ng-

Question

modèle html EnableInput() se déclenchée sur tous les boutons répétés ng, lorsque je clique sur un bouton

<md-card ng-repeat="item in vm.feeCard | orderBy:'$index':true"> 
     <div flex layout="column"> 
      <div layout layout-align="space-between center"> 
     <md-input-container > 
     <input name="feename" ng-model="item.name" placeholder="Fee Name" ng-readonly="vm.defaultReadonly" /> 
     </md-input-container> 
     <md-input-container > 

     <input name="amount" ng-model="item.amount" placeholder="$ Amount" ng-readonly="vm.defaultReadonly" /> 
     </md-input-container> 
    </div> 

<md-button class="md-primary md-raised" ng-click="vm.enableEditing()">Edit</md-button> >these repeated buttons triggered when i click one of them 
    </div> 
</md-card> 

mon contrôleur

(function() { 'use strict'; angulaire .module ('app.admin') .Commande ('schoolFeeCtrl', schoolFeeCtrl);

schoolFeeCtrl.$inject = ['$mdSidenav', '$http', 'msUtils', 'commonVar', '$mdDialog']; 

function schoolFeeCtrl($mdSidenav, $http, msUtils, commonVar, $mdDialog) { 
    var vm = this; 
    vm.title = 'schoolFeeCtrl'; 
    vm.feeCard = []; 
    vm.defaultReadonly = true; 
    vm.chipsRemovable = false; 


      vm.enableEditing = function() { 
     vm.defaultReadonly = false; 
     vm.chipsRemovable = true; 
    }; 
} 

})();

Answer 1

Raison:

Puisque vous utilisez la même fonction de mettre à jour tous les éléments de la ng-repeat la variable partagée est la même pour tous, donc nous sommes en mesure de modifier tous!

Solution:

Voici deux versions de la solution.

Attachez la variable readonly au tableau source utilisé dans ng-repeat.

En dessous jsFiddle vous pouvez voir que je suis en train de changer ng-readonly="item.defaultReadOnly" donc nous attachons une nouvelle variable appelée defaultReadOnly au tableau source, alors tout ce que nous devons faire est d'initialiser cette valeur à l'aide ng-init="item.defaultReadOnly = true;" que je joins à l'un des divs intérieur le ng-repeat, le sur le bouton nous pouvons donner ng-click="item.defaultReadOnly = false;" qui va désactiver la propriété en lecture seule et nous sommes en mesure d'éditer l'entrée.

JSFiddle Demo

Définissez la variable en lecture seule à un faux tableau, donc notre structure de réseau de source est préservée!

Dans le ci-dessous jsFiddle nous faisons une seule variation où au lieu d'utiliser item.defaultReadOnly nous utilisons une variable vm.temp séparée, maintenant on peut distinguer entre les différents éléments du ng-repeat, mais le réglage des valeurs telles que vm.temp[$index], donc chaque élément dans la ng-repeat aura un élément de tableau séparé dans vm.temp, L'explication ci-dessus s'applique à cet exemple aussi, seuls les noms de variables sont modifiés!

JSFiddle Demo