Angular增删查练习

来源：互联网发布：淘宝滥发信息新规则编辑：程序博客网时间：2024/05/21 18:39

}

实现鼠标移动到删除上时变为小手样式
#delete {
cursor: pointer;
}

.btn1 {
margin-left: 200px;
margin-top: 20px;
width: 130px;
height: 45px;
}
</style>
</head>

<body ng-app="myApp" ng-controller="myController">
<div id="div">

姓名查询条件<input type="text" ng-model="name" />
<select ng-change="change()" ng-model="age1" ng-init="age1 = ages[0]">
<option ng-repeat="x in ages">{{x}}</option>
</select>

<table border="1px" cellspacing="0px" cellpadding="0px">
<caption style="font-size: 30px; font-weight: 600;">用户列表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>拼音</th>
<th>职位</th>
<th>操作</th>
</tr>
<tr align="center" ng-repeat="person in people">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.pinyin}}</td>
<td>{{person.position}}</td>
<td><input type="button" id="delete" value="删除" ng-click="delete($index)" /></td>
</tr>
</table>
<input type="button" class="btn1" value="查询" ng-click="query()" />
<input type="button" class="btn1" value="添加用户" ng-click="addPerson()" />

<hr />

<fieldset ng-show="flag">
<table border="0px" cellspacing="0px" cellpadding="0px">
<caption style="font-size: 20px;">添加用户信息</caption>
<tr align="center">
<td>姓名<input type="text" ng-model="user_name" /></td>
</tr>
<tr align="center">
<td>年龄<input type="text" ng-model="user_age" </td></tr>
<tr align="center">
<td>拼音<input type="text" ng-model="user_pinyin" </td></tr>
<tr align="center">
<td>职位<input type="text" ng-model="user_position" </td></tr>
<tr align="center">
<td><input style="width: 100px; height: 30px;" type="button" value="保存" ng-click="addUser()" /></td>
</tr>
</table>
</fieldset>
</div>
</body>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myController", function($scope) {
$scope.ages = ["按年龄正序", "按年龄倒序"]
$scope.people = [{
"name": "张三",
"age": 45,
"pinyin": "zhangsan",
"position": "总经理"
}, {
"name": "李四",
"age": 23,
"pinyin": "lisi",
"position": "设计师"
}, {
"name": "王五",
"age": 42,
"pinyin": "wangwu",
"position": "工程师"
}, {
"name": "赵六",
"age": 18,
"pinyin": "zhaoliu",
"position": "工程师"
}, {
"name": "周七",
"age": 32,
"pinyin": "zhouqi",
"position": "人事经理"
}, ]

//实现姓名查询条件框
$scope.query = function() {
$scope.people = [{
"name": "张三",
"age": 45,
"pinyin": "zhangsan",
"position": "总经理"
}, {
"name": "李四",
"age": 23,
"pinyin": "lisi",
"position": "设计师"
}, {
"name": "王五",
"age": 42,
"pinyin": "wangwu",
"position": "工程师"
}, {
"name": "赵六",
"age": 18,
"pinyin": "zhaoliu",
"position": "工程师"
}, {
"name": "周七",
"age": 32,
"pinyin": "zhouqi",
"position": "人事经理"
}, ]
var query_name = $scope.name;
//实现查询条件框内的内容为空点击查询按钮时alert提示”请输入姓名”
if(query_name == null) {
alert("请输入姓名")
}
var newArr = [];
for(var i = 0; i < $scope.people.length; i++) {
var table_name = $scope.people[i].name;
if(query_name == table_name) {
newArr.push($scope.people[i]);
}
}
//当搜索内容未找到匹配项时提示”未找到内容”
if(newArr.length == 0) {
alert("未找到内容")
}
$scope.people = newArr;
}

//实现按照年龄倒序排序，实现按照年龄正序排序
$scope.change = function() {

var select_age = $scope.age1;

if(select_age == "按年龄倒序") {
$scope.people.sort(function(a, b) {
return b.age - a.age;
});
} else {
$scope.people.sort(function(a, b) {
return a.age - b.age;
});
}
}

//按要求实现内容添加
$scope.addPerson = function() {
$scope.flag = true;
}

//实现添加用户信息到列表中
$scope.addUser = function() {
var user = {
"name": $scope.user_name,
"age": $scope.user_age,
"pinyin": $scope.user_pinyin,
"position": $scope.user_position,
}
$scope.people.push(user);
$scope.flag = false;
}

//实现点击删除时弹出二次确认询问框
//实现删除功能，删除后从列表中消失
$scope.delete = function($index){
var flag = confirm("确认要删除吗?");
if (flag) {
$scope.people.splice($index,1);
}
}

})
</script>

阅读全文

1 0