동일한 요소의 색상을 개별적으로 변경하는 방법은 무엇입니까?

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

동일한 요소의 색상을 개별적으로 변경하는 방법은 무엇입니까?

답변

관련 문제