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

angularjs简单使用增删查

2017-12-20 15:34 477 查看

<!DOCTYPE html>

<html ng-app="zhangapp" ng-controller="demoC">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<style>
</style>
<script>
angular.module("zhangapp",[])
.controller("demoC",function($scope){

$scope.users=[{
name:"张三",
age:45,
spell:"zhangsan",
post:"总经理"

},{
name:"李四",
age:43,
spell:"lisi",
post:"设计师"
},{
name:"王五",
age:40,
spell:"wangwu",
post:"工程师"
},{
name:"赵六",
age:33,
spell:"zhaoliu",
post:"工程师"
},{
name:"周七",
age:32,
spell:"zhouqi",
post:"人事经理"
}];
//删除
$scope.del=function(obj){
var a=confirm("是否删除");
if(a){
$scope.users.splice(obj,1);
}

}
//添加
$scope.add=function(){
var ename=$scope.uname;
var eage=$scope.uage;
var espell=$scope.uspell;
var epost=$scope.upost;
$scope.flag = true;
$scope.users.push({name:ename,age:eage,spell:espell,post:epost});
}

$scope.fun=function(){

if($scope.sort=="按年龄倒序"){
$scope.iszx=true;
}else if($scope.sort=="按年龄正序"){
$scope.iszx=false;
}

}
})
</script>
</head>
<body>
<fieldset style="width:510px;">
<table border="1" cellspacing="0" style="width: 500px;" >
<tr>
姓名查询条件<input ng-model="selname" />

按年龄排序<select ng-model="sort" style="height: 21px;" ng-change="fun()">
<option >按年龄倒序</option>
<option >按年龄正序</option>
</select>
</tr>
<tr align="center">
<td>姓名</td>
<td>年龄</td>
<td>拼音</td>
<td>职位</td>
<td>操作</td>
</tr>
<tr align="center" ng-repeat="u in users|filter:{name:selname}|orderBy:or:iszx">
<td>{{u.name}}</td>
<td>{{u.age}}</td>
<td>{{u.spell}}</td>
<td>{{u.post}}</td>
<td><button ng-click="del($index)">删除</button></td>
</tr>

</table>
<button style="width: 100px;height: 40px;margin: 20px;margin-left: 140px;" >查询</button>
<button style="width: 100px;height: 40px;" ng-click="flag=true">添加用户</button>
</fieldset>

<fieldset style="width: 510px;" ng-show="flag" >
<legend>添加用户信息</legend>
<form style="width: 500px;text-align: center;" >
<h4 >姓名<input type="text" ng-model="uname" /></h4><br />
<h4 >年龄<input type="text" ng-model="uage"/></h4><br />
<h4 >拼音<input type="text" ng-model="uspell"/></h4><br />
<h4 >职位<input type="text" ng-model="upost" /></h4><br />
<h4 ><button style="width: 100px;height: 40px;" ng-click="add()">保存</button></h4>
</form>
</fieldset>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 简单使用增删查

相关文章推荐

新的分享

章节导航