Wie ändert man die Farbe der gleichen Elemente einzeln?

Ich erstelle eine Aufgabenliste mit angularjs und wenn ich einen neuen Eintrag zur Liste hinzufüge, wird eine neue span erstellt. Jeder span verfügt über 3 Tasten, es ist die Farbe zu ändern und ich habe es wie folgt aus:Wie ändert man die Farbe der gleichen Elemente einzeln?

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

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

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

Aber wenn ich mehrere Einträge haben, alle von ihnen Farbe zur gleichen Zeit ändern; Wie stelle ich die Farbänderung nur für die span benötigt?

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>

Quelle

2017-09-08 Ricardo Pimenta

einfach todo auf Ihre turn___ Funktionen zur Verfügung stellen und die todo.customStyle statt customStyle von Rahmen in der Vorlage verwenden.

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

Quelle

2017-09-08 10:34:14 wrager

Wie ändert man die Farbe der gleichen Elemente einzeln?

Antwort

Verwandte Themen