基於真實價格刪除AngularJS數組中的多個項目

試圖學習Angular並且遇到了一次刪除多個對象的問題。我正在創建一個待辦事宜應用程序，當用戶檢查多個項目並點擊「清除已完成」按鈕時，將檢查這些項目，並保留剩餘項目。基於真實價格刪除AngularJS數組中的多個項目

目前我可以添加，刪除單個項目和編輯項目。我希望做的就是點擊幾個項目與複選框和比清除它們取決於done:true

問題：我如何通過各個項目上運行，看看<span class="item-display done-{{items.done}}">{{items.title}}</span>爲真，並刪除與clear()功能的項目？

角版本：1.3.15

目錄設置：

|-index.html 
|-js/ 
    |app.js 
    |todo.ctrl.js

HTML：

<body ng-app="app"> 
<section class="module" ng-controller="todoController as todo"> 
<div class="container"> 
    <h1>{{todo.title}}</h1> 
    <form name="todo.addForm" class="form" ng-submit="todo.addItem()"> 
     <div class="form-group"> 
      <label>Add New Item</label> 
      <input type="text" class="form-control" ng-model="todo.new.title" required /> 
     </div> 
     <button class="btn btn-primary pull-right"><span class="glyphicon glyphicon-plus-sign"> Add</span></button> 
    </form> 
    <h3>Items:</h3> 
    <ul class="list-group"> 
     <li class="list-group-item todo-item" ng-repeat="items in todo.items"> 
      <input type="checkbox" ng-model="items.done"/> 
      <span class="item-display done-{{items.done}}">{{items.title}}</span> 
      <form> 
       <input class="form-control" type="text" ng-model="items.title" ng-keyup="todo.editOnEnter($index)"/> 
      </form> 
      <a ng-click="todo.delete($index)">Delete</a> 
      <a ng-click="todo.toggleEditMode($index)">Update</a> 
     </li> 
    </ul> 

    <button class="btn btn-danger pull-right" ng-click="todo.clear()">Clear Completed</button> 
</div> 
</section> 
<script src="bower_components/jquery/dist/jquery.min.js"></script> 
<script src="bower_components/angular/angular.min.js"></script> 
<script src="js/app.js"></script> 
<script src="js/todo.ctrl.js"></script>

app.js：

angular.module('app', []);

todo.ctrl.js ：

angular.module('app').controller("todoController", function(){ 
var vm = this; 
vm.title = 'To Do Application'; 
vm.input = ''; 
vm.items = [{ 
    title : 'dog food', 
    done : false 
}]; 
vm.new = { 
    title : '', 
    done: false 
}; 
vm.addItem = function(){ 
    vm.items.push(vm.new); 
    vm.new = {title:'',done: false}; 
}; 

$(document).click(function(){ 
    console.log(vm.items); 
}); 

vm.delete = function (index){ 
    vm.items.splice(index, 1); 
}; 
vm.update = function(index){ 
    vm.items.copy(index, 1); 
}; 
vm.toggleEditMode = function(){ 
    $(event.target).closest('li').children('.item-display, form').toggleClass('editing'); 
}; 
vm.editOnEnter = function(index){ 
    if(event.keyCode == 13){ 
     vm.toggleEditMode(); 
    } 
}; 

// 
// 
// NEED HELP HERE 
// 
// 
vm.clear = function(){ 
    var oldTodos = vm.items; 
    //vm.items = []; 
    angular.forEach(oldTodos, function() { 
     if (vm.items.done == true){ 
      this.remove(); 
     } 
    }); 
}; 
});

來源

2015-04-05 Full-Hybrid

我不完全確定我是否瞭解您的問題，但是如果我沒有弄錯，您想清除您的清單中的done待辦事項嗎？

Array.prototype.filter函數將根據過濾函數修剪數組。如果返回true，則它將保留該項目，如果您返回false，則將其刪除。

vm.clear = function(){ 
    vm.items = vm.items.filter(function(item){ 
    return !item.done 
    } 
}

來源

2015-04-05 01:32:14 JoshWillik

這就是我一直在尋找的東西。我正在關注4個不同的教程（一些較老的），並且正在查找將所有文檔拼湊在一起的文檔。我想修剪掉任何有關聯的對象：true，但保留這些對象：false。 – 2015-04-05 01:42:12

你是男人@Josh。我現在正在尋找這個18小時。 – ahmednawazbutt 2017-10-23 10:18:41

基於真實價格刪除AngularJS數組中的多個項目

回答

相關問題