Angular和Ng-Repeat中的复选框列表.所有复选框一起检查吗?如何单独保存支票

我正在创建一个具有角度，非常简单的待办事项列表应用...我如何将其分开，以便一次检查一个然后检查以保存检查/未选中的框？

html

<body ng-controller="HomeController as vm"
ng-cloak>
    <input type="text" placeholder="To do..."
    ng-model="vm.myTask">
    <button type="button" ng-click="vm.submitTask()">Submit</button>
    </br>
    <label ng-repeat="Task in vm.myTasks">
        <ul>
            <li>
            <input type="checkbox" value="{{Task}}"
            ng-model="vm.taskList">{{Task}}</li>
        </ul>
    </label>

homecontroller.js

//task array
var myTasks = [];
class HomeController {

//submit task from input value
submitTask(){
//push new task into array
  myTasks.push(this.myTask);
}
constructor(myTask){
this.myTasks = myTasks;
}

}
angular.module("myapp").controller("HomeController", HomeController);

您必须在数组中按检查任务，并根据检查/取消选中的复选框操纵此数组。

constructor(myTask,checkedTask){
this.myTasks = myTasks;
this.checkedTask = checkedTask;
}
check(task,indx){
  var index = checkedTask.indexOf(task);
        if (index > -1)
            checkedTask.splice(index, 1);
            else
            checkedTask.push(task);
 }

html

    <li>
      <input type="checkbox" value="{{Task}}"
                  ng-click="vm.check(Task,$index)" ng-checked="vm.checkedTask.indexOf(Task)>-1">{{Task}}
   </li>

工作plunker ：https：//plnkr.co/edit/cdrwuteexbgmaug3pj2s?p=preview

我希望它更容易。将任务更改为具有名称和检查范围的对象。将复选框绑定到任务的检查属性。完成。

html

<body ng-controller="HomeController as vm"
ng-cloak>
    <input type="text" placeholder="To do..."
    ng-model="vm.myTask">
    <button type="button" ng-click="vm.submitTask()">Submit</button>
    <br>
    <label ng-repeat="task in vm.myTasks"> <!-- lowercase task -->
        <ul>
            <li>
            <input type="checkbox" value="{{task.name}}" ng-model="task.checked">{{task.name}}</li> <!-- task is now an object, not only a string, so we access the properties name and checked -->
        </ul>
    </label>
  </body>

var app = angular.module("myapp",[]);
var myTasks = [];
class HomeController {

//submit task from input value
submitTask(){
//push new task into array
  myTasks.push({name: this.myTask, checked: false}); //create new object and push it into the array
}
constructor(myTask,checkedTask){
this.myTasks = myTasks;
}
}
app.controller("HomeController", HomeController);

工作plunker(基于vivz plunker(：https://plnkr.co/edit/cupw165tqgilusjewqkr?p=preview

相关内容

最新更新

热门标签：