Question

我使用ng-repeat在视图中列出我控制器内定义的数组中的元素。每个item都有一个编辑和取消按钮。

<div class="portlet-body" dir-paginate="item in keys>
  <div class="portlet portlet-blue">
    <div class="portlet-heading">
      <div class="portlet-title">
        <h4>{{item}}</h4>
      </div>
    </div>
    <div class="panel-collapse collapse in">
      <div class="portlet-body">
        <textarea class="form-control" rows="5" ng-disabled="textAreaDisable">{{baselineDataObj[item]}}</textarea>
      </div>
      <div class="portlet-footer">
        <button class="btn btn-primary" ng-click="handleCancel()">Cancel
        </button>

        <button class="btn btn-warning" ng-click="handleEdit()">{{editText}}
        </button>
       </div>
     </div>
   </div>
 </div>

在我的控制器中，我已经定义了更新按钮和禁用/启用文本区域的功能：

$scope.textAreaDisable = true;
$scope.editText="Edit";

$scope.handleEdit=function(){
  if ($scope.editText === 'Edit'){
    $scope.textAreaDisable=false;
  } else if ($scope.editText === 'Submit'){
      console.log("came inside the Submit case ....");
  }
  $scope.editText = $scope.textAreaDisable? "Edit":"Submit";
}

$scope.handleCancel=function(){
  $scope.textAreaDisable=true;
    $scope.editText="Edit";
}

函数handleCancel和handleEdit正在应用于所有项目，但我需要应用调用函数调用的当前元素。请让我知道我哪里出错了。

Answer 1

只需更改handleCancel和handleEdit个功能，然后将item作为参数传递

Answer 2

在ng-click中，您可以访问一个名为$ event的魔法变量，您可以将其传递给控制器函数。 $ event参数有相当多的信息，比如$ event.target，它是目标的dom节点，你可以使用jquery或angular.element（$ event.target）找到文本区域和启用它。

相反，您可以传递对项目本身的引用，ng-click =＆＃39; handleEdit（item）＆＃39;并调整控制器功能以将编辑/取消标志放在项目而不是全局范围。

Answer 3

尝试将textAreaDisable和editText属性添加到数组中的每个项目。现在他们适用于所有项目。

这样的事情：

$scope.items = [];
// initialize items array from server or wherever

for (var i=0; i<$scope.items.length; i++) {
   $scope.items[i].textAreaDisable = true;
   $scope.items[i].editText="Edit";
}

然后将该项目传递到handleEdit和handleCancel函数：

$scope.handleEdit=function(item){
   if (item.editText === 'Edit'){
      item.textAreaDisable=false;
   } else if (item.editText === 'Submit'){
      console.log("came inside the Submit case ....");
   }
   item.editText = item.textAreaDisable? "Edit":"Submit";
}

$scope.handleCancel=function(item){
   item.textAreaDisable=true;
   item.editText="Edit";
}

Answer 4

有三种方式（根据我的说法，可能还有更多）。

将完整项目作为参数传递，例如handleCancel(item)
将重复索引作为参数传递给handleCancel($index)并处理数组。
利用$event回调函数中的ng-click

希望它有所帮助。

Answer 5

您的问题是您为textarea的每个ng禁用使用相同的范围变量。

这是一个例子。 https://jsfiddle.net/q8r4e/1723/

$scope.keys = [
   {item : 'item01', input : '123', disabled : true , btnEdit : 'Edit'},
   {item : 'item02', input : '', disabled : true , btnEdit : 'Edit'},
   {item : 'item03', input : '', disabled : true , btnEdit : 'Edit'},
];

使用Angularjs ng-repeat时更新单个项目

5 个答案: