Question

我正在使用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>

Answer 1

只需向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>
<!-- ... -->

如何单独更改相同元素的颜色？

1 个答案: