AngularJS change attribute values

Question

I have rows in table which generate buttons dynamically

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

In my Angular code I have

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

So basically I want to change the edit glyphicon to save glyphicon and the save glyphicon back to edit glyphicon. But since I have assigned class to the button it changes the glyphicons of all buttons in the table. How can I change the icon of only the button of which is clicked?

illeb · Accepted Answer · 2016-09-29 13:21:05Z

2

By assigning the editable variable to the task object:

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

and in your HTML:

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

This way, you'll end up having an unique class for each of your task object.

Also, remember to use ng-class instead of the plain class attribute.

answered Sep 29, 2016 at 13:21

illeb

2,9471 gold badge23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

taguenizy · Accepted Answer · 2016-09-29 13:36:17Z

Approach 1

You can update your HTML to

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

Passing the task instead of the id directly allows you to update it's editable state directly on the task. Your controller should update the editable property

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

Note: I've passed the glyphicon class directly to the button since it won't change.

Approach 2

You could also approach it another way and keep the condition in the HTML

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

And your controller could just update the editable property

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

M B · Accepted Answer · 2016-09-29 13:20:39Z

0

Set the editable property on the task itself and then use task.editable. This will be a unique property for each task

answered Sep 29, 2016 at 13:20

M B

2,32627 silver badges36 bronze badges

Comments

abullrich · Accepted Answer · 2016-09-29 13:50:56Z

you need to make some changes to your code. I'm gonna provide you the code I used in order to achieve what I believe is your goal, and will then explain the reasoning behind it.

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

As you can see, I included an attribute inside the task called editable. I'll be using this attribute to change the class. You'll also notice I', using $index. This is a default counter for 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"});

You'll need to add the editable properties to your objects.

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

I don't believe this needs much explanation. Please let me know otherwise.

N.K · Accepted Answer · 2016-09-29 13:58:13Z

0

If you simply want to switch between class just use ng-class

exemple, you have a variable leftOrRight, we will assume that you have two class in you css file: floatLeft and floatRight (with the attribute float: right/left; )

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

If you set leftOrRight to "right" you will have the same thing as class="floatRight" for exemple.

answered Sep 29, 2016 at 13:58

N.K

1,6832 gold badges22 silver badges34 bronze badges

Collectives™ on Stack Overflow

AngularJS change attribute values

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Related