如何分別更改相同元素的顏色？

我使用angularjs創建了一個任務列表，當我向列表中添加一個新條目時，會創建一個新的span。每個span有3個按鈕來改變它的顏色和我做了這樣的：如何分別更改相同元素的顏色？

$scope.turnGreen = function() { 
    $scope.customStyle.style = {'background': 'green'}; 
    }; 

    $scope.turnYellow = function() { 
    $scope.customStyle.style = {'background': 'yellow'}; 
    }; 

    $scope.turnRed = function() { 
    $scope.customStyle.style = {'background': 'red'}; 
    };

但是，當我有多個項，所有的人都在改變的同時顏色;我如何僅對span進行顏色更改？

HTML：

<body> 
    <h2>My Task List</h2> 
    <div ng-controller="TodoListController"> 
     <form ng-submit="addTodo()" name="form"> 
      <input type="text" ng-model="todoText" size="30" placeholder="Add New Entry" required id="textField" ng-model="myVar"> 
      <input class="btn-primary" type="submit" value="Save"> 
     </form> 
     <ul class="unstyled"> 
     <li ng-repeat="todo in todos | orderBy : $index:true"> 
      <button type="button" class="close" aria-label="Close" ng-click="remove()"> 
      <span aria-hidden="true">&times;</span> 
      </button> 
      <span class="done-{{todo.done}}" ng-style="customStyle.style" ng-hide="todo.editing" ng-click="updateVar($event)">{{todo.text}}</span> 
      <input type="text" ng-show="todo.editing" ng-model="todo.text"> 
      <button type="submit" ng-hide="todo.editing" ng-click="change(todo); todo.editing === true">Edit</button> 

      <button ng-click="turnGreen()" class="button-start">Start</button> 
      <button ng-click="turnYellow()" class="button-pause">Pause</button> 
      <button ng-click="turnRed()" class="button-stop">Stop</button> 

      <button type="submit" ng-show="todo.editing" ng-click="save($index); todo.editing === false">Save</button> 
      <button type="submit" ng-show="todo.editing" ng-click="cancel($index); todo.editing === false">Cancel</button> 
     </li> 
     </ul> 
    </div> 
    </body>

來源

2017-09-08 Ricardo Pimenta

只需提供todo您turn___功能和模板從使用範圍todo.customStyle，而不是customStyle。

$scope.turnGreen = function (todo) { 
    todo.customStyle = {'background': 'green'}; 
    }; 

    $scope.turnYellow = function (todo) { 
    todo.customStyle = {'background': 'yellow'}; 
    }; 

    $scope.turnRed = function (todo) { 
    todo.customStyle = {'background': 'red'}; 
    };

HTML：

<!-- ... --> 
<button type="button" class="close" aria-label="Close" ng-click="remove(todo)"> 
<!-- ... --> 
<span class="done-{{todo.done}}" ng-style="todo.customStyle" ng-hide="todo.editing" ng-click="updateVar($event)">{{todo.text}}</span> 
<!-- ... --> 
<button ng-click="turnGreen(todo)" class="button-start">Start</button> 
<button ng-click="turnYellow(todo)" class="button-pause">Pause</button> 
<button ng-click="turnRed(todo)" class="button-stop">Stop</button> 
<!-- ... -->

來源

2017-09-08 10:34:14 wrager

如何分別更改相同元素的顏色？

回答

相關問題