同じ要素の色を個別に変更する方法は？

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

は、単にあなたの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：

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

同じ要素の色を個別に変更する方法は？

答えて

関連する問題