Question

如果我有一个简单的待办事项列表：

HTML

<ul ng-repeat="todos in keyVar.list">
  <li ng-class="{ 'completed' : keyVar.toggle }">
       {{ todos }}
     <input ng-if="!keyVar.toggle" type = "checkbox" ng-click="keyVar.toggle=true" >
     <input ng-if="keyVar.toggle" type = "checkbox" checked= "true" ng-click="keyVar.toggle=false" ></input>
   </li>
</ul>

JS

angular.module("todoApp", [])
 .controller("mainCtrl", function(){

    var keyVar = this;

     keyVar.title ="Angular Todos";
     keyVar.list=[];
     keyVar.toggle = false;


     keyVar.todosArr = function(){
       keyVar.list.push(keyVar.todo)
       keyVar.todo = "";
     }
});

当我运行它时，我可以添加一个待办事项，并选中并取消选中切换已完成类的复选框，但是它会为每个待办事项提供类，如果我选中一个复选框，则会检查所有这些。我想我必须使用像keyVar.list [$ index]这样的东西？但我不知道在哪里使用它或如何使用它。

Answer 1

试试这样。我为每个待办事项定义status。并将其绑定到复选框。当用户点击复选框时更改它。

angular.module("todoApp", [])
 .controller("mainCtrl", function(){

    var keyVar = this;

     keyVar.title ="Angular Todos";
      keyVar.list=[
         {
            "title":"Todo1",
            "status":false
         },
         {
            "title":"Todo2",
            "status":false
         }
     ];


     keyVar.todosArr = function(){
       keyVar.list.push({title:keyVar.todo,status:false})
       keyVar.todo = "";
     }
});

.completed{
     text-decoration: line-through;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="todoApp" ng-controller="mainCtrl as keyVar" class="container">
 
  <input type="text" ng-model="keyVar.todo">
  <button ng-click="keyVar.todosArr()">Add Todo</button>
  <ul ng-repeat="todos in keyVar.list">
  <li ng-class="{ 'completed' : todos.status }">
       {{ todos.title }}
   <input ng-model="todos.status" type = "checkbox" ng-click="keyVar.toggle=true" >
   </li>
</ul>

</div>

Answer 2

尝试使用ng-checked而不是ng-click。

<input ng-if="!keyVar.toggle" ng-checked="keyVar.toggle=true">

Angular - 在ng-repeat内部，复选框状态只影响一个元素

2 个答案: