Question

当我点击一个按钮时，

html模板enableInput（）在所有重复按钮上被触发

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

我的控制器

（function（）{ '使用严格'; 角 .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;
    };
}

}）（）;

Answer 1

<强>原因：

由于您使用相同的函数来更新ng-repeat中的所有元素，因此共享变量对所有元素都是相同的，因此我们可以编辑所有这些元素！

<强>解决方案：

以下是该解决方案的两个版本。

将readonly变量附加到ng-repeat中使用的源数组。

在下面的JSFiddle中，您可以看到我正在更改ng-readonly="item.defaultReadOnly"，因此我们将一个名为defaultReadOnly的新变量附加到源数组，然后我们需要做的就是使用{{1}初始化此值}我已经附加到ng-init="item.defaultReadOnly = true;"中的一个div，我们可以给出ng-repeat按钮，这将禁用只读属性，我们可以编辑输入。

JSFiddle Demo

将readonly变量设置为虚拟数组，从而保留源数组结构！

在下面的JSfiddle中，我们只做一个变体，而不是使用 ng-click="item.defaultReadOnly = false;"我们使用单独的变量item.defaultReadOnly，现在我们可以区分vm.temp的不同元素，但将值设置为ng-repeat，因此vm.temp[$index]中的每个元素都可以1}}将在ng-repeat中有一个单独的数组元素，上面的解释也适用于此示例，只更改了变量名称！

JSFiddle Demo

尝试触发ng重复按钮上的功能，但是在所有重复按钮上触发功能

1 个答案: