Обновление одного элемента при использовании 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

Просто измените handleCancel и handleEdit функции и передать item в качестве параметра

Answer 2

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

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

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

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

• Pass полный элемент, как параметр, как handleCancel(item)

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

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

Надеется, что это помогает.

Answer 5

Ваша проблема в том, что вы используете ту же переменную области видимости для каждого ng-disabled для 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'}, 
];