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

angularjs之增删改查2

2017-10-22 19:33 295 查看 
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Angularjs的增删改查，排序，查询年龄范围</title>

//需要导入angular.js库文件

<script type="text/javascript" src="angular-1.3.0.js"></script>
<script type="text/javascript">
//1.注入模块
var app = angular.module("myapp", []);

//2.定义一个数组(表单中显示的初始数据)
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航