javascript - 如何从 Angular js中的数组中删除复选框

标签 javascript jquery angularjs

尝试创建一个函数来从数组中删除选定的复选框项目,但似乎无法弄清楚。我尝试过使用 splice 和 .pop() 但它不会删除我选择的项目。我认为最好的方法是使用 if 语句,但我不知道如何编写它以使其显示 true 或 false。请帮忙!!!

JS:

.controller('toDoCtrl', function($scope, toDoFactory){
    //set $scope variables
    $scope.tasks = toDoFactory.tasks;
    $scope.removeTasks = toDoFactory.removeTasks;
})
.factory('toDoFactory', ['$http', function($http){
    var toDo = {
        tasks: [],
        removeTasks: function(selectedTask){
            angular.forEach(toDo.tasks, function(value, selectedTask){
                var i = toDo.tasks.indexOf(value);
                toDo.tasks.splice(toDo.tasks.indexOf(i), 1);
            });
        }
    };  
    return toDo;
}])

HTML:

<button ng-click="removeTasks()">Remove</button>

最佳答案

我不太明白您是想删除所有选定的任务还是仅删除一个任务。 无论如何,你可以这样做:

JS:

app
.controller('toDoCtrl', function($scope, toDoFactory){
    //set $scope variables
    $scope.data = {};
    $scope.data = toDoFactory.data;
    $scope.removeTasks = toDoFactory.removeTasks;
    $scope.removeTask = toDoFactory.removeTask;
})
.factory('toDoFactory', ['$http', function($http){
    var toDo = {
        data : {
          tasks: [
            {text: "hello world", done: false},
            {text: "hello world2", done: false},
            {text: "hello world3", done: false}
          ]
        },
        removeTasks: function(){
          toDo.data.tasks = toDo.data.tasks.filter(function(task){
            return !task.done;
          });
        }, 
        removeTask: function(index){
          toDo.data.tasks.splice(index, 1);
        },
    };  
    return toDo;
}]);

HTML:

  <body ng-controller="toDoCtrl">

  <div ng-repeat='task in data.tasks'>
    <input type='checkbox' ng-model='task.done' />
    <span>{{task.text}}</span>
  </div>
  <br/>
  <button ng-click="removeTasks()">Remove</button>

  </body>

普朗克: https://plnkr.co/edit/bTG0fEUZl1uoTIFT1NhC?p=preview

关于javascript - 如何从 Angular js中的数组中删除复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35239052/

相关文章:

javascript - MongoDB 和 Nest.js : Define a custom name for a collection

javascript - jQuery tmpl if 对象值 == 当前迭代值

javascript - 等待 Angular JS 工厂请求获得响应

jquery - 使用 JQuery Validate Plugin 验证具有相同名称的多个表单字段

javascript - 在智能手机上加载时禁用 JavaScript 脚本

angularjs - ui-router 用参数注释解析以缩小?

javascript 数组序列化

jQuery悬停: fading in a hidden div while fading out the "default" one

angularjs - 动态内容单页应用程序 SEO

angularjs - 如何在 ASP.NET Web API 和 MVC 中使用相同的标识?