Удаление элементов из массива в AngularJs

322

17 июля 2017, 16:58

Помогите решить проблему... при выборе всех элементов и если нажимаю на удалить сразу удаляются не все выбранные элементы а скажем выбрал пять сначала удаляются 3 потом еще раз нажимаю на удалить удаляются 2 потом нажимаю еще и удаляется последний.

var app = angular.module("myApp", []); 
app.controller('myCtrl', ['$scope', function($scope) { 
	var notes = [ 
	{selected: false, title: "How to study AngularJS"},{selected: false, title: "How to study AngularJS"},{selected: false, title: "How to study AngularJS"},{selected: false, title: "How to study AngularJS"},{selected: false, title: "How to study AngularJS"}, 
	]; 
 
	$scope.notes = notes; 
	var edit = false; 
	$scope.toggleEdit = function(){ 
		if (edit === false) { 
			$scope.showEdit = function(){ 
				return edit = true; 
			} 
		}else{ 
			$scope.showEdit = function(){ 
				return edit = false; 
			} 
		} 
	}; 
	$scope.addNew = function(title){ 
		notes.push({ 
			title : notes.title 
		}); 
	}; 
	$scope.selectAll = function(){ 
		for(var j = 0;j < notes.length;j++){ 
			var selAll = notes[j]; 
			if (selAll.selected === false) { 
				selAll.selected = true; 
			}else{ 
				selAll.selected = false; 
			} 
		} 
	} 
	$scope.remove = function(){ 
		for(var i = 0;i < notes.length;i++){ 
			if (notes[i].selected === true) { 
				notes.splice(notes.indexOf(notes[i]), 1); 
			}; 
		}; 
	}; 
}]);

ul{ 
	list-style-type: none; 
} 
body{ 
	font-family: "Roboto",sans-serif; 
	margin: 20px; 
	text-align: center; 
} 
.btn-primary{ 
	display: block; 
	margin-left: 38px; 
} 
i.fa-plus-square-o{ 
	display: inline-block; 
	vertical-align: middle; 
	color: #000; 
	font-size: 30px; 
	cursor: pointer; 
} 
i.fa-plus-square-o::before{ 
	display: inline-block; 
	vertical-align: middle; 
} 
h1{ 
	margin: 0; 
	display: inline-block; 
	vertical-align: middle; 
} 
.add_new{ 
	display: block; 
} 
.item{ 
	padding: 10px 30px; 
	margin: 5px 0; 
	box-shadow: 0px 1px 14px rgba(0,0,0,.1); 
	text-align: left; 
} 
.title{ 
	display: inline-block; 
	vertical-align: middle; 
} 
.description{ 
	font-size: 32px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body ng-app="myApp"> 
	<div ng-controller="myCtrl" class="container"> 
		<h1>Your Notes</h1> 
		<i class="fa fa-plus-square-o" aria-hidden="true" ng-click="toggleEdit()"></i> 
		<pre> {{notes.length}} </pre> 
		<pre>  </pre> 
		<div class="add_new" ng-show="showEdit()"> 
			<input type="text" ng-model="notes.title"> 
			<button class="btn btn-default" ng-click="addNew(title)">Add New Note</button> 
		</div> 
		<button class="btn btn-primary" ng-click="selectAll()">Select All</button> 
		<ul> 
			<li ng-repeat="note in notes"> 
				<div class="item"> 
					<div class="control-group"> 
						<label class="control control--checkbox"> 
							<input type="checkbox" ng-model="note.selected"> 
							<div class="control__indicator"></div> 
						</label> 
					</div> 
					<div class="title"> 
						<h1 class="description"> {{note.title}} </h1> 
					</div> 
				</div> 
			</li> 
		</ul> 
		<div class="delete"> 
			<button class="btn btn-danger" ng-click="remove()">Delete selected</button> 
		</div> 
	</div> 
  </body>

Answer 1

Потому что вы неправильно удаляете элементы из массива (после удаление первого элемента сбиваются индексы). Используйте встроенный .filter (может не работать в старых браузерах) или библиотеки вроде lodash.

$scope.remove = function() {
    $scope.notes = $scope.notes.filter(function(node) {
        return !note.selected;
    });
};

Вариант с циклом

$scope.remove = function(){
        for(var i = 0;i < notes.length;i++){
            if (notes[i].selected === true) {
                notes.splice(notes.indexOf(notes[i]), 1);
                i--; // Коррекция индекса после удаления
            };
        };
    };