Html AngularJS更改属性值

我在表中有动态生成按钮的行

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

---

所以基本上我想把edit glyphicon改为save glyphicon，把save glyphicon改回edit glyphicon。但由于我已经为按钮指定了类，它会更改表中所有按钮的图标。如何仅更改单击的按钮的图标？

在

任务

本身上设置

可编辑

属性，然后使用

任务.可编辑

。这将是每个

任务的唯一属性
在
任务
本身上设置
可编辑
属性，然后使用
任务.可编辑
。通过将
可编辑
变量分配给
任务
对象，这将是每个
任务的唯一属性：

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



这样，每个
任务
对象都会有一个唯一的类

另外，请记住使用而不是普通的
类
属性。
通过将
可编辑
变量指定给
任务
对象：

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



这样，每个
任务
对象都会有一个唯一的类

另外，请记住使用而不是普通的
class
属性。
方法1

您可以将HTML更新为

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

注意：我已经将
glyphicon
类直接传递给按钮，因为它不会改变

方法2

您也可以用另一种方式处理它，并将条件保留在HTML中

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

方法1

您可以将HTML更新为

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

注意：我已经将
glyphicon
类直接传递给按钮，因为它不会改变

方法2

您也可以用另一种方式处理它，并将条件保留在HTML中

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

您需要对代码进行一些更改。我将向您提供我使用的代码，以实现我认为是您的目标，然后将解释其背后的原因

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

您需要将可编辑属性添加到对象中

$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"
      }
    }

我认为这不需要太多解释。请另外通知我。
您需要对代码进行一些更改。我将向您提供我使用的代码，以实现我认为是您的目标，然后将解释其背后的原因

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

您需要将可编辑属性添加到对象中

$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"
      }
    }

我认为这不需要太多解释。请告诉我其他情况。
如果您只是想在类之间切换，只需使用
ng类

例如，您有一个变量
leftOrRight
，我们假设您的css文件中有两个类：
floatLeft
和
floatRight
（属性为
float:right/left；
）

如果您将leftOrRight设置为“right”，您将拥有与
class=“floatRight”
相同的功能，例如。
如果您只是想在类之间切换，只需使用
ng类即可

例如，您有一个变量
leftOrRight
，我们假设您的css文件中有两个类：
floatLeft
和
floatRight
（属性为
float:right/left；
）

如果将leftOrRight设置为“right”，则与示例中的
class=“floatRight”
相同