您的位置：首页 > Web前端 > AngularJS

AngularJs实现添加,批量删除,全选,反选等功能

2017-12-18 15:58 956 查看 
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

<style type="text/css">
* {
margin: 0px auto;
}

.div1 {
width: 700px;
height: 170px;
border: 1px solid black;
text-align: center;
}

.div2 {
width: 700px;
}

input {
margin-top: 20px;
}

table {
width: 700px;
margin-top: 5px;
text-align: center;
}
</style>
</head>

<body ng-app="myApp" ng-controller="myCtrl">

<div class="div1">
用户名<input type="text" ng-model="in_name" id="in_name" /><span></span><br /> 密码
<input type="text" ng-model="in_pswd" id="in_pswd" /><span></span><br />
<input type="button" value="添加" ng-model="tianjia" ng-click="add()" />
</div>
<div class="div2">
<div>
<input type="button" value="批量删除" ng-model="piliang" ng-click="pl_shanchu()" />
<input type="button" value="全选" id="quan" ng-click="qxuan()" />
<input type="button" value="反选" id="fan" ng-click="fxuan()" />
</div>
<table border="1px" cellspacing="0px">
<tr>
<td></td>
<td>用户名</td>
<td>密码</td>
<td>操作</td>

</tr>
<tr ng-repeat="u in unames">
<td><input type="checkbox" ng-click="isXuan($index)" id="x" ng-model="xuan" /></td>
<td>{{u.uname}}</td>
<td>{{u.pswd}}</td>
<td><input type="button" value="删除" ng-click="shanchu()" /></td>

</tr>
</table>

</div>
<script type="text/javascript">
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope) {

//定义一个数组
var arr = [{
"flag": false,
"uname": "张三",
"pswd": 123456,
}, {
"flag": false,
"uname": "李四",
"pswd": 345345,
}, {
"flag": false,
"uname": "王五",
"pswd": 345345,
}];
$scope.unames = arr;

//添加
$scope.add = function() {
var n = $("#in_name").val();
var p = $("#in_pswd").val();

//判断不为空
if (n == "" && p == "") {
alert("请输入用户名和密码");

} else {
//定义一个对象
var d = {
"uname": $scope.in_name,
"pswd": $scope.in_pswd
};
$scope.unames.push(d);
}

}

//改变复选框的状态
$scope.isXuan = function($index) {
arr[$index].isChecked = !arr[$index].isChecked;

}

//批量删除
$scope.pl_shanchu = function() {
for (var i = arr.length - 1; i >= 0; i--) {
var x = arr[i].isChecked;
if (x) {
arr.splice(i, 1);
}
}
$scope.unames = arr;
}

//全选
var flag1 = true;
$scope.qxuan = function() {

var cb = $("input[type=checkbox]");
for (var i = 0; i < cb.length; i++) {
cb[i].checked = flag1;
arr[i].isChecked = flag1;
}
flag1 = !flag1;
}

//反选的代码
$scope.fxuan = function() {
var cb = $("input[type=checkbox]");
for (var i = 0; i < cb.length; i++) {
cb[i].checked = !cb[i].checked;

arr[i].isChecked = !arr[i].isChecked;
}

}
//删除
$scope.shanchu = function() {
for (var i = arr.length - 1; i >= 0; i--) {
var d = arr[i];

}
arr.splice(d, 1);

}

});
</script>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航