Обновление одного элемента при использовании Angularjs ng-repeat

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

Ваша проблема в том, что вы используете одну и ту же переменную области видимости для каждого отключенного ng для textarea.

вот пример. 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'},
];

Answer 2

Попробуйте добавить 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 3

Просто поменяй handleCancel а также handleEdit функции и проход item как параметр

Answer 4

Внутри ng-click у вас есть доступ к магической переменной, называемой $event, которую вы можете передать функциям контроллера. Параметр $ event содержит довольно много информации, например, $event.target, который является узлом dom цели, вы можете использовать jquery или angular.element($event.target), чтобы затем найти текстовую область и включить его.

И наоборот, вы можете передать ссылку на сам элемент, ng-click='handleEdit(item)' и настроить функции контроллера, чтобы поместить флаг редактирования / отмены на элемент вместо глобальной области видимости.

Answer 5

Есть три способа (по мне, может быть, есть и другие).

• Передать полный элемент как параметр как handleCancel(item)

• Передать индекс повторения как параметр типа handleCancel($index) и обрабатывать массив.

• Использовать $event в ng-click функция обратного вызова

Надеюсь, поможет.