<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular-1.5.5/angular.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.users=[
{id:1,name:'张三',mima:'123',age:'20',sex:'男',done:false},
{id:2,name:'李四',mima:'456',age:'28',sex:'女',done:false},
{id:3,name:'王五',mima:'789',age:'12',sex:'女',done:false},
{id:4,name:'赵六',mima:'000',age:'30',sex:'男',done:false},
];
//实现年龄区间的问题
$scope.age="--请选择--";
$scope.agefilter=function (item) {
if($scope.age!="--请选择--"){
var arr=$scope.age.split("-");
var min=arr[0];
var max=arr[1];
if(item.age<min||item.age>max){
return false
}else{
return true;
}
}else {
return true;
}
}
//实现性别的过滤
$scope.sex="--请选择--";
$scope.sexfilter=function (item) {
if( $scope.sex!="--请选择--"){
if(item.sex==$scope.sex){
if($scope.sex=="男"){
return item.sex="男";
}else{
return item.sex="女";
}
}
}else
{
return true;
}
}
//进行全选
$scope.qx=false;
$scope.quanxuan=function () {
if($scope.qx==true){
for(var i=0;i<$scope.users.length;i++){
$scope.users[i].done=true;
}
}else if($scope.qx==false){
for(var i=0;i<$scope.users.length;i++){
$scope.users[i].done=false;
}
}
}
//进行反选
$scope.fx=function () {
$scope.n=0;
for(var i=0;i<$scope.users.length;i++){
if($scope.users[i].done==true){
$scope.n++;
} else {
$scope.n--;
}
}
if($scope.n==$scope.users.length){
$scope.qx=true;
}else{
$scope.qx=false;
}
}
//全部删除
$scope.delAll=function () {
if($scope.qx==true){
$scope.users.length=0;
}
}
//批量删除
$scope.dele=function () {
for(var i=0;i<$scope.users.length;i++){
if($scope.users[i].done==true){
$scope.users.splice(i,1);
i--;
}
}
}
//实现添加的功能
$scope.xm="";
$scope.pass="";
$scope.nl="";
$scope.xb="";
$scope.show=false;
$scope.add=function () {
$scope.show=true;
$scope.sub=function () {
//用户名非空
if( $scope.xm==""||$scope.xm==null){
alert("姓名不能为空")
}else {
//年龄在10到60之间
if( $scope.nl>=10&&$scope.nl<=60){
$scope.users.push({id: $scope.users.length+1,name:$scope.xm,mima:$scope.pass,age:$scope.nl,sex:'男',done:false})
}
}
}
}
//修改密码
$scope.xg=function (index) {
$scope.show=true;
$scope.sub=function () {
if($scope.users[index].mima==$scope.pass){
alert("修改后的密码不能和原密码相同!!")
}else{
$scope.users[index].mima=$scope.pass;
}
}
}
});
</script>
<style>
h1{
text-align: center;
}
p{
text-align: center;
}
.table{
margin: 0 auto;
text-align: center;
border: 1px solid black;
width: 500px;
border-collapse: collapse;
}
table tr td{
border: 1px solid black;
}
.button{
text-align: center;
width: 80px;
height: 30px;
background: #45BDFF;
margin-left: 500px;
margin-top: 10px;
}
table{
margin: 0 auto;
text-align: center;
border: 1px solid black;
width: 500px;
border-collapse: collapse;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h1>用户信息表</h1>
<p>
<input type="text" placeholder="用户名查询" ng-model="name"/>
年龄:<select ng-model="age">
<option>--请选择--</option>
<option>10-20</option>
<option>21-30</option>
<option>31-40</option>
</select>
性别:<select ng-model="sex">
<option>--请选择--</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="delAll()">全部删除</button>
<button ng-click="dele()">批量删除</button>
</p>
<table class="table">
<tr>
<th><input type="checkbox" ng-model="qx" ng-click="quanxuan()"/>全选</th>
<th>ID</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in users|filter:{name:name}|filter:agefilter|filter:sexfilter">
<td><input type="checkbox" ng-model="item.done" ng-click="fx()"/></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.mima}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button ng-click="xg($index)">修改密码</button></td>
</tr>
</table>
<button class="button" ng-click="add()">添加用户</button>
<table ng-show="show">
<tr>
<td>用户名:</td>
<td><input type="text"placeholder="请输入用户名" ng-model="xm"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text"placeholder="请输入密码" ng-model="pass"/></td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text"placeholder="请输入年龄" ng-model="nl"/></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="text"placeholder="请输入性别" ng-model="xb"/></td>
</tr>
<tr>
<td colspan="2"><button ng-click="sub()">提交</button></td>
</tr>
</table>
</body>
</html>
AngularJS的表单的处理
最新推荐文章于 2021-10-30 20:01:07 发布