<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Angularjs的增删改查，排序，查询年龄范围</title>
//需要导入angular.js库文件
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
//注入模块
var app = angular.module("myapp", []);
//定义一个数组
var user = [{
id: 1,
name: "轩轩",
age: 22,
sex: "男"
},
{
id: 2,
name: "轩",
age: 33,
sex: "女"
},
{
id: 3,
name: "小轩",
age: 44,
sex: "男"
},
{
id: 4,
name: "大轩",
age: 55,
sex: "女"
}
]
//绑定控制器
app.controller("myctr", function($scope) {
$scope.users = user;
// $scope.ageSize = "";
//年龄范围过滤
$scope.ageTest = function(age, ageSize) {
//alert(ageSize);
//alert(age);
if(ageSize != "--请选择--") {
var agess = ageSize.split("-");
var ageMin = agess[0];
var ageMax = agess[1];
if(age < ageMin || age > ageMax) {
return false;
} else {
return true;
}
} else {
return true;
}
}
//全部删除
$scope.remove = function(index) {
if(confirm("是否全部删除")) {
$scope.users.splice(index);
}
}
//单行删除
//方式1根据下标删除一行信息
/*$scope.del = function(index) {
alert("确定要删除" + index + "吗");
$scope.users.splice(index, 1);
}*/
//方式2根据名字删除一行
$scope.del=function(name){
if(confirm("是否删除"+name+"商品")){
var p;
for(index in $scope.users){
p=$scope.users[index];
}
if(p.name==name){
$scope.users.splice(index,1);
}
}
}
//批量删除
$scope.removes = function() {
var userNames = [];
for(index in $scope.users) {
if($scope.users[index].pi == true) {
userNames.push($scope.users[index].name);
}
}
if(userNames.length > 0) {
if(confirm("是否删除选中项")) {
for(i in userNames) {
var name = userNames[i];
for(i2 in $scope.users) {
if($scope.users[i2].name == name) {
$scope.users.splice(i2, 1);
}
}
}
}
} else {
alert("请删除选项");
}
}
//添加信息
$scope.name = "";
$scope.age = "";
$scope.sex = "";
$scope.sub = function() {
var newUser = {
id: $scope.users.length + 1,
name: $scope.name,
age: $scope.age,
sex: $scope.sex
}
$scope.users.push(newUser);
}
//修改用户信息
$scope.name = name;
$scope.names = "";
$scope.ages = "";
$scope.sexs = "";
$scope.updates = function() {
alert("修改信息");
for(index in $scope.users) {
if($scope.users[index].name == $scope.names) {
$scope.users[index].age = $scope.ages;
$scope.users[index].sex = $scope.sexs;
}
}
}
//根据标题排序
$scope.bold = "bold";
$scope.title = 'name';
$scope.desc = 0;
$scope.ss = '';
$scope.dian=function(tit){
$scope.title=tit;
$scope.desc=!$scope.desc;
}
})
</script>
</head>
<center>
<body ng-app="myapp" ng-controller="myctr">
<h1>信息表</h1>
<!--信息表1-->
<table cellpadding="0" cellspacing="0" border="1">
<!-- 导航栏 -->
<tr>
<td colspan="2"></td>
<td><input type="text" placeholder="输入用户名" ng-model="ss" /></td>
<!-- 查询年龄范围框 -->
<td> 年龄：
<select id="age" ng-model="ageSize" ng-init="ageSize='--请选择--'">
<option>--请选择--</option>
<option>11-20</option>
<option>21-30</option>
<option>31-40</option>
<option>41-50</option>
<option>51-60</option>
</select> </td>
<td colspan="2" align="right"><button ng-click="removes()">批量删除</button></td>
</tr>
<!-- 表头部分-->
<tr>
<th align="left"><input type="checkbox"></th>
<th align="left" ng-click="dian('id')">id</th>
<th ng-click="dian('name')">用户名</th>
<th ng-click="dian('age')">年龄</th>
<th ng-click="dian('sex')">性别</th>
<th>操作</th>
</tr>
<!--循环遍历-->
<tr ng-repeat="x in users |filter:{'name':ss} |orderBy:title:desc" ng-if="ageTest(x.age,ageSize)">
<td><input type="checkbox" ng-model="x.pi"></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.sex}}</td>
<td>
<button ng-click="del(x.name)">删除</button>
</td>
</tr>
</table>
<button>添加信息</button>
<!-- 添加信息表2-->
<table cellpadding="10" cellspacing="1" border="1">
<tr>
<th>用户名</th>
<td><input ng-model="name" placeholder="输入用户名"></td>
</tr>
<tr>
<th>年龄</th>
<td><input ng-model="age" placeholder="输入年龄"></td>
</tr>
<tr>
<th>性别</th>
<td><input ng-model="sex" placeholder="输入性别"></td>
</tr>
<!-- 提交按钮 -->
<tr align="center">
<td colspan="2"><input type="button" ng-click="sub()" value="提交"></td>
</tr>
</table>
<!-- 修改信息表3 -->
<table border="1" cellspacing="1" cellpadding="10">
<button>修改信息</button>
<tr>
<th>用户名：</th>
<td><input ng-model="names" placeholder="请输入用户名" /></td>
</tr>
<tr>
<th>年龄</th>
<td><input ng-model="ages" placeholder="请输入年龄" /></td>
</tr>
<tr>
<th>性别</th>
<td><input ng-model="sexs" placeholder="请输入性别" /></td>
</tr>
<!-- 提交按钮 -->
<tr align="center">
<td colspan="2"><input type="button" value="提交" ng-click="updates()" /></td>
</tr>
</table>
</body>
</center>
</html>
如果觉得《Angularjs的增删改查 排序 查询年龄范围》对你有帮助，请点赞、收藏，并留下你的观点哦！
