試圖觸發NG-重複按鈕的功能，但功能被觸發的所有NG-重複按鈕

HTML模板enableInput（）獲取所有NG-重複按鍵觸發，當我在一個按鈕，點擊試圖觸發NG-重複按鈕的功能，但功能被觸發的所有NG-重複按鈕

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

我的控制器

（函數（）{ '使用嚴格'; 角 .module（ 'app.admin'） .controller（ '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; 
    }; 
}

}）（）;

來源

2017-10-20 Simran Singh

首先，我強烈建議您立即開始使用Angular4。我不確定這是否與AngularJS相同，但是在HTML文件中的Angular4中，您可以調用按鈕的函數並傳入$ event。從組件的ts文件中，您可以通過$ event.target訪問單個按鈕。現在你有了這個按鈕，你可以看看它是'id'屬性來告訴哪個按鈕被點擊了。 – ObjectiveTC

原因：

由於您使用相同的功能來更新ng-repeat所有元素共享變量都是一樣的，因此我們就可以編輯所有的人！

解決方案：

這裏是解決方案的兩個版本。

將只讀變量附加到ng-repeat中使用的源數組。

在下面的jsfiddle你可以看到我改變ng-readonly="item.defaultReadOnly"因此，我們附上了一個名爲defaultReadOnly源數組新的變量，那麼我們需要做的是初始化使用ng-init="item.defaultReadOnly = true;"這個值，我已經連接到內部的div之一ng-repeat，我們可以通過按鈕ng-click="item.defaultReadOnly = false;"禁用只讀屬性，我們可以編輯輸入。

JSFiddle Demo

設置只讀變量到虛擬陣列，因此我們的源陣列結構保存！

在下面的jsfiddle我們做僅一種變體中，其中，代替使用 item.defaultReadOnly我們使用一個單獨的變量vm.temp，現在我們可以在ng-repeat的不同元件之間進行區分，但由此在每個元件設置像vm.temp[$index]的值， ng-repeat將在vm.temp中有一個單獨的數組元素，上面的解釋也適用於這個例子，只有變量名被改變！

JSFiddle Demo

來源

2017-10-21 06:00:20

@Simran這個答案對你有幫助嗎？ –

試圖觸發NG-重複按鈕的功能，但功能被觸發的所有NG-重複按鈕

回答

相關問題