Angularjs：选中推送并取消选中从数组拼接ID答案

【问题标题】：Angularjs: Check to push and unchecked to splice id from arrayAngularjs：选中推送并取消选中从数组拼接ID
【发布时间】：2016-10-25 09:51:19
【问题描述】：

我有一个从 php 脚本中获取的表格。下面给出的代码完美地工作，当我勾选它成功推送 id 的框时，但拼接时它不能很好地工作。当我只勾选和取消勾选单行时，它也会拼接数组。但是当我选择多行时，即使我取消勾选它也会一次又一次地推动。请检查代码。

$scope.exampleArray = [];
 	$scope.pushInArray = function(id) {
	 // get the input value
	/* var inputVal = id;*/
	 var index = $scope.exampleArray.indexOf(id);
	 if( index ){
	 	$scope.exampleArray.push(id);
	 }else { $scope.exampleArray.splice(index, 1);  }
	 	$scope.deleteBulk = function(){

	 		if(confirm("Are you sure you want to delete " + $scope.exampleArray.length + " record(s))?")){
		 		$http.post('http://localhost/angular-code-crud/index.php/user/bulk_delete_user',
	        	{'id':$scope.exampleArray}).success(function(){
          			 $scope.displayUsers();
        		});
     		}
    	};	 
 	};

<table class="table table-striped table-hover table-condensed">
	<thead>
		<tr>
			<th></th>
			<th ng-click="sort('name')">Name
			<span class="glyphicon sort-icon" ng-show="sortKey=='name'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
			<th ng-click="sort('gender')">Gender<span class="glyphicon sort-icon" ng-show="sortKey=='gender'" ng-class="{' glyphicon glyphicon-chevron-up':reverse,' glyphicon glyphicon-chevron-down':!reverse}"></span>
			<th ng-click="sort('email')">Email<span class="glyphicon sort-icon" ng-show="sortKey=='email'" ng-class="{' glyphicon glyphicon-chevron-up':reverse,' glyphicon glyphicon-chevron-down':!reverse}"></span></th>
			<th>Address</th>
			<th>Phone</th>
			<th>Action</th>
		</tr>
	</thead>
	<tbody>
	<!-- <tr ng-repeat="user in users | filter:searchUser | orderBy:sortKey:reverse | filter:paginate"> -->
	<tr ng-repeat="user in users|orderBy:sortKey:reverse|filter:searchUser " >
	
		<td><!-- <input type="checkbox" ng-click="deleteBulk(user.id)" ng-true-value="{{user.id}}" ng-checked="master" checklist-model="user.id" checklist-value="{{user.id}}">{{ user.id }} -->
			<div class="checkbox">
				<label>
					<input type="checkbox" name="arrExample" ng-model="arrInput" ng-change='pushInArray(user.id)' >
				</label>
			</div>
		</td>
		<td>{{ user.name }}</td>
		<td>{{ user.gender }}</td>
		<td>{{ user.email }}</td>
		<td>{{ user.address }}</td>
		<td>{{ user.phone }}</td>
		<td>
		 <button class="btn btn-primary" ng-click="updateData(user.id, user.name, user.gender, user.email, user.address, user.phone)">Edit <i class="material-icons">mode_edit</i></button>
		<button class="btn btn-danger" ng-click="deleteData(user.id)">Delete <i class="material-icons">delete</i></button>
		</td>
	</tr>
	</tbody>
	</table>

抱歉英语不好。

【问题讨论】：

标签： angularjs arrays push splice

【解决方案1】：

没关系，我发现错误在哪里。

$scope.exampleArray = [];
 	$scope.pushInArray = function(id) {
	 // get the input value
	/* var inputVal = id;*/
  //$scope.exampleArray.push(id);
	 var index = $scope.exampleArray.indexOf(id);
   console.log(index);
	 if(index === -1 ){ //this is where i have bug. match the condition with -1
	 	$scope.exampleArray.push(id); 
	 } else { $scope.exampleArray.splice(index, 1);}
	 	$scope.deleteBulk = function(){

	 		if(confirm("Are you sure you want to delete " + $scope.exampleArray.length + " record(s))?")){
		 		$http.post('http://localhost/angular-code-crud/index.php/user/bulk_delete_user',
	        	{'id':$scope.exampleArray}).success(function(){
          			 $scope.displayUsers();
        		});
     		}
    	};	 
 	};

【讨论】：

【解决方案2】：

希望对你有帮助

JS：

$scope.pushInArray = function(data) {
    var index = $scope.exampleArray.indexOf(data.id);
    if(data.checked) {
        if( index === -1 ) {
            $scope.exampleArray.push(data.id);
        }
    } else {
        $scope.exampleArray.splice(index, 1);
    }
}

HTML : 将input type="checkbox" 行改为下面

<input type="checkbox" name="arrExample" ng-model="user.checked" ng-change='pushInArray(user)' >

【讨论】：

【解决方案3】：

改变条件索引

 $scope.pushInArray = function (id) {
        var index = $scope.exampleArray.indexOf(id);
        if (index <= -1) {
            $scope.exampleArray.push(id);
        } else
            $scope.exampleArray.splice(index, 1);
        };
    };

【讨论】：