Angularjs 如何分别更改相同元素的颜色？

我正在使用angularjs创建一个任务列表，当我向列表中添加一个新条目时，会创建一个新的跨度。 每个跨距有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'};
  };

但当我有多个条目时，所有条目都会同时改变颜色；如何仅在需要的范围内更改颜色

HTML:

只需为turn_____;函数提供todo，并在模板中使用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:

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

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

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

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