javascript - 在 Angular 待办事项列表中更改颜色

Question

嗨，这是我第一次来这里，所以请耐心等待我，我存货有问题我需要在跨度类中更改颜色这是我的代码

当我单击复选框时，颜色需要在单击事件中从某种颜色更改为灰色

另外，如果有人想帮忙，我会尝试使用选定的选项进行选择，但要有 Angular

帮助者的 tnx。

function TodoCtrl($scope) {
  $scope.priority = ['Urgent', 'Critical', 'Normal', 'IfYouCan']

  $scope.todos = [{
    text: 'Attend Selection Day',
    done: false,
    lvl: 'Critical'
  }, {
    text: 'Register to Full Stack Web Course',
    done: false,
    lvl: 'Normal'
  }, {
    text: 'Go see X-Man apocalypse movie',
    done: false,
    lvl: 'IfYouCan'
  }];

  $scope.addTodo = function() {

    $scope.todos.push({
      text: $scope.todoText,
      done: false,
      lvl: $scope.todoLvl
    });

    $scope.todoText = '';
  };

  $scope.remaining = function() {
    var count = 0;

    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });


    return count;
  };

  $scope.archive = function() {
    var oldTodos = $scope.todos;

    $scope.todos = [];

    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
}

.todo-true {
  text-decoration: line-through;
  color: grey;
}

.todo-Urgent {
  color: red;
}

.todo-Critical {
  color: orange;
}

.todo-Normal {
  color: green;
}

.todo-IfYouCan {
  color: RoyalBlue;
}

div.frame {
  position: absolute;
  margin: 10px 0px 0px 50px;
}

div.todo {
  height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<div ng-app>
  <div class="frame">
    <h2>Todo</h2>
    <div ng-controller="TodoCtrl">

      <div>
        <input type="text" ng-model="todoText" size="30" placeholder="add new todo here">
        <select ng-init="todoLvl = priority[2]" ng-model="todoLvl">
          <option ng-repeat="item in priority" value="{{item}}">{{item}}</option>
        </select>
        <button ng-click="addTodo()" type="button">add</button>
      </div>
      <hr />
      <span>{{remaining()}} of {{todos.length}} remaining</span>
      <br />
      <div ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.done">
        <span class="done-{{todo.done}}"><span class="todo-{{todo.lvl}}">{{todo.text}} {{todo.lvl}}</span></span>
      </div>
      <br />
      <a href="" ng-click="archive()">Completed</a>
    </div>
  </div>
</div>

Answer 1

您可以根据您的 todo.done (ng-model) 添加“ng-class”。

同时为颜色添加更具体的选择器。

function TodoCtrl($scope) {
  $scope.priority = ['Urgent', 'Critical', 'Normal', 'IfYouCan']

  $scope.todos = [{
    text: 'Attend Selection Day',
    done: false,
    lvl: 'Critical'
  }, {
    text: 'Register to Full Stack Web Course',
    done: false,
    lvl: 'Normal'
  }, {
    text: 'Go see X-Man apocalypse movie',
    done: false,
    lvl: 'IfYouCan'
  }];

  $scope.addTodo = function() {

    $scope.todos.push({
      text: $scope.todoText,
      done: false,
      lvl: $scope.todoLvl
    });

    $scope.todoText = '';
  };

  $scope.remaining = function() {
    var count = 0;

    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });


    return count;
  };

  $scope.archive = function() {
    var oldTodos = $scope.todos;

    $scope.todos = [];

    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
}

span.todo-true {
  text-decoration: line-through;
  color: grey;
}

.todo-Urgent {
  color: red;
}

.todo-Critical {
  color: orange;
}

.todo-Normal {
  color: green;
}

.todo-IfYouCan {
  color: RoyalBlue;
}

div.frame {
  position: absolute;
  margin: 10px 0px 0px 50px;
}

div.todo {
  height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<div ng-app>
  <div class="frame">
    <h2>Todo</h2>
    <div ng-controller="TodoCtrl">

      <div>
        <input type="text" ng-model="todoText" size="30" placeholder="add new todo here">
        <select ng-init="todoLvl = priority[2]" ng-model="todoLvl">
          <option ng-repeat="item in priority" value="{{item}}">{{item}}</option>
        </select>
        <button ng-click="addTodo()" type="button">add</button>
      </div>
      <hr />
      <span>{{remaining()}} of {{todos.length}} remaining</span>
      <br />
      <div ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.done">
        <span class="done-{{todo.done}}"><span class="todo-{{todo.lvl}}" ng-class="{'todo-true': todo.done}">{{todo.text}} {{todo.lvl}}</span></span>
      </div>
      <br />
      <a href="" ng-click="archive()">Completed</a>
    </div>
  </div>
</div>