Question

我创建了一个有角度的待办事项列表应用程序，非常简单，但我遇到了复选框的问题---如果我点击一个复选框，它们都会被检查......我怎么能将它分开以便它一次只检查一个，然后检查以保存已检查/未选中的框？

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);

Answer 1

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

<强> JS

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>

Working Plunker ：https://plnkr.co/edit/cDrWUteexBgmAug3Pj2S?p=preview

Answer 2

我希望它更容易一些。将您的任务更改为具有名称和checked-property的对象。将复选框绑定到任务的checked属性。完成。

<强> HTML

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);

<强> JS

{{1}}

工作plunker（基于Vivz plunker）： https://plnkr.co/edit/CUPw165TQGiLusJEWqkr?p=preview

angular和ng-repeat中的复选框列表..所有复选框一起检查？如何单独保存检查？

2 个答案: