AngularJS атрибут изменения значения

Question

У меня есть строки в таблице, которые генерируют кнопки динамически

<tr ng-repeat="task in task"> 
    <td>{{task.Name}}</td> 
    <td>{{task.Comments}}</td> 
    <td>{{task.Project}}</td> 
    <td>{{task.Duration}}</td> 
    <td> 
     <button class={{editable}} ng-click="editTask(task.id)"></button> 
     <button class="glyphicon glyphicon-trash"></button> 
    </td> 
    </tr> 

В моей угловой коде есть

$scope.editTask = function(id){ 
     if($scope.editable == "glyphicon glyphicon-edit"){ 
     $scope.editable="glyphicon glyphicon-floppy-save"; 
     } 
     else{ 
      $scope.editable="glyphicon glyphicon-edit" 
     } 
    } 

Поэтому в основном я хочу, чтобы изменить редактирования glyphicon, чтобы сохранить glyphicon и сохранить глификон обратно для редактирования глификона. Но поскольку я назначил класс кнопке, он изменяет глификоны всех кнопок в таблице. Как я могу изменить значок только кнопки, на которую нажата кнопка?

Answer 1

подход 1

Вы можете обновить HTML для

<td> 
    <button class="glyphicon" ng-class="task.editable" ng-click="editTask(task)"></button> 
    <button class="glyphicon glyphicon-trash"></button> 
</td> 

Передача задачи вместо id непосредственно позволяет обновлять это editable состояние непосредственно на task. Ваш контроллер должен обновлять editable свойству

$scope.editTask = function(task){ 
    if(task.editable == "glyphicon-edit") { 
     task.editable="glyphicon-floppy-save"; 
    } 
    else{ 
     task.editable="glyphicon-edit" 
    } 
} 

Примечание: Я прошел glyphicon класс непосредственно к кнопке, так как она не изменится.

подход 2

Вы также можете подойти к нему по-другому и сохранить состояние в HTML

<button class="glyphicon" ng-class="task.editable ? 'glyphicon-edit': 'glyphicon-floppy-save'" ng-click="editTask(task)"></button> 

И ваш контроллер может просто обновлять editable свойству

$scope.editTask = function(task){ 
    task.editable = !task.editable; 
} 

Answer 2

Установите editable на task, а затем используйте task.editable. Это будет уникальное свойство для каждого task

Answer 3

Присвоив переменной editable к task объекта:

$scope.editTask = function(task){ 
    if(task.editable == "glyphicon glyphicon-trash") 
     task.editable="glyphicon glyphicon-floppy-save";   
    else 
     task.editable="glyphicon glyphicon-trash";   
} 

и в вашем HTML:

<button ng-class="editable" ng-click="editTask(task)"></button> 

Таким образом, вы будете в конечном итоге имея уникальный класс для каждого вашего объекта task.

Кроме того, не забудьте использовать ng-class вместо обычного атрибута class.

Answer 4

вам необходимо внести некоторые изменения в свой код. Я собираюсь предоставить вам код, который я использовал, чтобы достичь того, во что я верю, является вашей целью, и затем объяснит причины этого.

<table> 
    <tr ng-repeat="task in tasks"> 
     <td>{{task.Name}}</td> 
     <td>{{task.Comments}}</td> 
     <td>{{task.Project}}</td> 
     <td>{{task.Duration}}</td> 
     <td> 
     <button class={{task.editable}} ng-click="editTask($index)"></button> 
     <button class="glyphicon glyphicon-trash"></button> 
     </td> 
    </tr> 
    </table> 

Как вы можете видеть, я включил атрибут внутри задачи называется редактируемые. Я буду использовать этот атрибут для изменения класса. Вы также заметите меня, используя $index. Это счетчик по умолчанию для ng-repeat.

$scope.tasks.push({Name: 'Jorge', Comments: 'Comentario',Project: 'Tengu', Duration: 45, editable: "glyphicon glyphicon-trash"}); 
$scope.tasks.push({Name: 'Mermelada', Comments: 'Comentario2',Project: 'DM-300', Duration: 30, editable: "glyphicon glyphicon-trash"}); 

Необходимо добавить свойства для редактирования в объекты.

$scope.editTask = function(id){ 
     if($scope.tasks[id].editable == "glyphicon glyphicon-trash"){ 
     $scope.tasks[id].editable="glyphicon glyphicon-floppy-save"; 
     } else{ 
      $scope.tasks[id].editable="glyphicon glyphicon-trash" 
     } 
    } 

Я не верю, что это требует много объяснений. Пожалуйста, дайте мне знать иначе.

Answer 5

Если вы просто хотите, чтобы переключаться между классом просто использовать ng-class

Exemple, у вас есть переменная leftOrRight, мы будем считать, что у вас есть два класса в вас CSS файл: floatLeft и floatRight (с атрибутом float: right/left;)

ng-class="{ floatRight : leftOrRight == 'right', floatLeft : leftOrRight == 'left' }" 

Если вы установили leftOrRight в «right», то у вас будет то же самое, что и class="floatRight".