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>

在我的Angular代码中我有

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

所以基本上我想更改编辑glyphicon以保存glyphicon并保存glyphicon回来编辑glyphicon。但是因为我已经为按钮指定了类，所以它会更改表中所有按钮的glyphicons。如何更改仅单击按钮的图标？

Answer 1

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

方法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 3

在editable上设置task属性，然后使用task.editable。这将是每个task

的唯一属性

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>

如您所见，我在任务中包含了一个名为 editable 的属性。我将使用此属性来更改类。您还会注意到我使用$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

例如，您有一个变量leftOrRight，我们假设您在css文件中有两个类：floatLeft和floatRight（具有属性float: right/left;）< / p>

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

如果你将leftOrRight设置为“right”，那么例如class="floatRight"就会有同样的事情。

AngularJS更改属性值

5 个答案: