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

angular.js 表格增删改查

2017-10-24 18:37 302 查看 
<!DOCTYPE html>
<html ng-app="MyApp">
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="angular-1.3.0.js"></script>

<title></title>
<script type="text/javascript">
var flag = false;
var app=angular.module("MyApp",[]);
app.controller("myCtrl",function($scope){
$scope.data=[
{che1:"c0",id:1, name:"张三", password:"123", age:10, sex:"男", state:false},
{che1:"c1",id:2, name:"李四", password:"123", age:22, sex:"女", state:false},
{che1:"c2",id:3, name:"王五", password:"123", age:34, sex:"男", state:false},
{che1:"c3",id:4, name:"赵六", password:"123", age:15, sex:"男", state:false},
];

$scope.ageFan = function(age,ageSize){
var arr =  ageSize.split("-");
var min = arr[0];
var max = arr[1];
if(ageSize == "不限"){
return true;
}else {
if (age > min && age < max) {
return true;
} else {
return false;
}
}
}

//全部删除
$scope.deleteAll = function () {
for(i=0;i<$scope.data.length;i++){
$scope.data.splice(i,$scope.data.length);
}
}
var id=5;
//点击按钮添加
$scope.add=function(){
$scope.data.push({
id:id++,
name:$scope.name,
password: $scope.password,
age: $scope.age,
sex: $scope.sex,
state:false
})
$scope.name = "";
$scope.password = "";
$scope.age = "";
$scope.sex = "";
$scope.addUserIsShow = false;
}
$scope.addUser=function(){
$scope.addUserIsShow=true;
}

//批量删除
$scope.deletePi = function(){
var flag = true;
//for遍历所有数据,判断状态是否为true,是true就证明选中了.
for(i = 0;i<$scope.data.length;i++){
//选中了就会执行删除splice方法,删除的时候下表会跟随变化,所以要i.
if($scope.data[i].state == true){
$scope.data.splice(i,1);
flag=false;
i--;
}
}
//如果flag执行到这等于false那么就证明有选中的,如果等于true就证明没走if里面的方法
if(flag){
alert("请勾选条目");
}
}

$scope.swithAll = function(){

for(i = 0;i<$scope.data.length;i++){
if($scope.che == true) {

$scope.data[i].state = true;
}else{
$scope.data[i].state = false;
}
}
}
/***paixi*/
$scope.px=function(){

if($scope.age1==2){
flag=true;
}else{
flag=false;
}.

$scope.data.sort(function(a,b){
if(flag){
return a.age> b.age ? 1:-1;
}else{
return a.age< b.age ? 1:-1;
}
});
}

$scope.editUser = function (index) {
var x=$scope.data[index];
$scope.e_name= x.name;
$scope.e_password="";
$scope.e_age="";
$scope.e_sex="";
$scope.ewwwww=true;
$scope.index=index;
}
$scope.edit=function(){
if($scope.e_name==null || $scope.e_name==""){
alert("用户名不能为空");
return;
}
if($scope.e_password==null || $scope.e_password==""){
alert("密码不能为空");
return;
}
if(!/^\d+$/.test($scope.e_age)){
alert("年龄必须为整数");
return;
}
if($scope.e_sex==null || $scope.e_sex==""){
alert("性别不能为空");
return;
}
$scope.data[$scope.index].name=$scope.e_name;
$scope.data[$scope.index].password=$scope.e_password;
$scope.data[$scope.index].age=$scope.e_age;
4000

$scope.data[$scope.index].sex=$scope.e_sex;
$scope.ewwwww=false;
};
//           $scope.order2 = function(){
//                alert($scope.age1);
//                if($scope.age1==2){
//                    flag = true;
//                }else{
//                    flag= false;
//                }
//               data.sort(function(a , b){
//                    if(flag){
//                        return a.age > b.age ? 1 : -1;
//                    }else{
//                        return a.age < b.age ? 1 : -1;
//                    }
//               })
//           }

});

</script>
</head>
<body ng-controller="myCtrl">
<div>查找:<input type="text" ng-model="chazhao" placeholder="输入用户名">
年龄:<select ng-model="ageSize" ng-init="ageSize='不限'">
<option>不限</option>
<option>0-11</option>
<option>12-20</option>
<option>21-30</option>
<option>31-40</option>
<option>41-50</option>
</select>
<button ng-click="deleteAll()">全部删除</button>
<button ng-click="deletePi()">批量删除</button>
排序:<select ng-model="age1" ng-change="px()">
<option value="">反序</option>
<option value="2">正序</option>
</select>
</div>
<div style="margin-top: 15px">
<table border="1">
<tr>
<th><input type="checkbox"   ng-click="swithAll()" ng-model="che"></th>
<th>ID</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="x in data | filter:{name:chazhao}">
<th><input type="checkbox" id={{x.che}} ng-model="x.state"></th>
<th>{{x.id}}</th>
<th>{{x.name}}</th>
<th>{{x.password}}</th>
<th>{{x.age}}</th>
<th>{{x.sex}}</th>
<th><button ng-click="editUser($index)">修改内容</button></th>
</tr>
</table>
</div>
<div style="margin-top:16px ">
<button ng-click="addUser()">添加用户</button>
<div ng-show="addUserIsShow">
<table border="1px">
<tr>
<td>用户名:</td>
<td>
<input type="text" ng-model="name">
</td>
</tr>
<tr>
<td>密 码:</td>
<td>
<input type="text" ng-model="password">
</td>
</tr>
<tr>
<td>年 龄:</td>
<td>
<input type="text" ng-model="age">
</td>
</tr>
<tr>
<td>性 别:</td>
<td>
<input type="text" ng-model="sex">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button ng-click="add()">提交</button>
</td>
</tr>
</table>

</div>
<div ng-show="ewwwww">
<table border="1">
<tr>
<td>
用户名：
</td>
<td>
<input type="text" ng-model="e_name" disabled/>
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="text" ng-model="e_password"/>
</td>
</tr>
<tr>
<td>
年龄：
</td>
<td>
<input type="text" ng-model="e_age"/>
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="text" ng-model="e_sex"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button ng-click="edit()">提交</button>
</td>
</tr>
</table>
</div>

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