javascript - angularJs 复选框 获取对象数组 问题
本文介绍了javascript - angularJs 复选框 获取对象数组 问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
已经实现 单选多选获取 对应值的ID 存入对应数组现在 想同时取到 id,code,name三个值 成为三个数组，没有思路求帮助解答，具体代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../angular-1.3.0.14/angular.js" ></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<table class="table">
<thead>
<tr>
<th>
<input type="checkbox" ng-click="selectAll($event)" ng-checked="isSelectedAll()"/>
</th>
<th>全选</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="e in users" ng-class="getSelectedClass(e.id)">
<td>
<input type="checkbox" name="selected" ng-checked="isSelected(e.id)" ng-click="updateSelection($event, e.id)"/>
</td>
<td>{{e.name}}</td>
</tr>
<p>id{{selected}}</p>
<p>姓名{{selected1}}</p>
<p>帐号{{selected2}}</p>
<button ng-click="ck()">点我</button>
</tbody>
</table>
</div>
<script>
var myApp = angular.module('myApp', []);
MyCtrl = function ($scope,$http) {
$scope.users=[{
"id": "1",
"code": "123",
"name": "qweww",
"email": "70ee6533@qq.com"
},
{
"id": "2",
"code": "130",
"name": "xueeen",
"email": "70ee533@qq.com"
},{
"id": "3",
"code": "1233",
"name": "qwe1",
"email": "707116533@qq.com"
},
{
"id": "4",
"code": "13230",
"name": "xueq3uan",
"email": "707116533@qq.com"
}];
$scope.ck = function(){
if($scope.selected.length == 0){
alert("空")
}else{
alert("非空")
}
}
$scope.selected = [];
$scope.selected1 = [];
$scope.selected2 = [];
var updateSelected = function (action, id ,name) {
if (action == 'add' & $scope.selected.indexOf(id) == -1) $scope.selected.push(id);
if (action == 'remove' && $scope.selected.indexOf(id) != -1) $scope.selected.splice($scope.selected.indexOf(id), 1);
}
$scope.updateSelection = function ($event, id) {
var checkbox = $event.target;
var action = (checkbox.checked ? 'add' : 'remove');
updateSelected(action, id);
};
$scope.selectAll = function ($event) {
var checkbox = $event.target;
var action = (checkbox.checked ? 'add' : 'remove');
for (var i = 0; i < $scope.users.length; i++) {
var entity = $scope.users[i];
updateSelected(action, entity.id);
}
};
$scope.getSelectedClass = function (entity) {
return $scope.isSelected(entity.id) ? 'selected' : '';
};
$scope.isSelected = function (id) {
return $scope.selected.indexOf(id) >= 0;
};
$scope.isSelectedAll = function () {
return $scope.selected.length === $scope.users.length;
};
}
</script>
</body>
</html>解决方案
直接在你的代码的基础上更改了一点
点击预览效果和看代码
https://jsfiddle.net/998s7vko/
核心更改在这儿，里面一串push不是特别优雅，主要是思路
var updateSelected = function(action, item, name) {
let index = $scope.selected.indexOf(item.id);
if (action == 'add' && index == -1) {
$scope.selected.push(item.id);
$scope.selected1.push(item.name);
$scope.selected2.push(item.email);
}
if (action == 'remove' && index != -1) {
$scope.selected.splice(index, 1);
$scope.selected1.splice(index, 1);
$scope.selected2.splice(index, 1);
}
}这篇关于javascript - angularJs 复选框 获取对象数组 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
