Angularjs:勾选push,不勾选从数组中拼接id
Angularjs: Check to push and unchecked to splice id from array
我有一个从 php 脚本中提取的 table。下面给出的代码完美地工作,当我勾选它成功推送 ID 的框时,但在拼接时它不能正常工作。
当我只勾选和取消勾选单行时,它也会拼接数组。但是当我 select 多行时,即使我取消勾选,它也会一次又一次地推动。请检查代码。
$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>
抱歉英语不好。
没关系我发现哪里有错误。
$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();
});
}
};
};
希望对您有所帮助
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)' >
更改条件索引
$scope.pushInArray = function (id) {
var index = $scope.exampleArray.indexOf(id);
if (index <= -1) {
$scope.exampleArray.push(id);
} else
$scope.exampleArray.splice(index, 1);
};
};
我有一个从 php 脚本中提取的 table。下面给出的代码完美地工作,当我勾选它成功推送 ID 的框时,但在拼接时它不能正常工作。 当我只勾选和取消勾选单行时,它也会拼接数组。但是当我 select 多行时,即使我取消勾选,它也会一次又一次地推动。请检查代码。
$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>
抱歉英语不好。
没关系我发现哪里有错误。
$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();
});
}
};
};
希望对您有所帮助
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)' >
更改条件索引
$scope.pushInArray = function (id) {
var index = $scope.exampleArray.indexOf(id);
if (index <= -1) {
$scope.exampleArray.push(id);
} else
$scope.exampleArray.splice(index, 1);
};
};