1实现用户列表展示 2.实现按年龄进行排序 3.实现按姓名进行模糊搜索 4.实现删除功能

最新推荐文章于 2021-12-20 17:10:57 发布

四夕520

最新推荐文章于 2021-12-20 17:10:57 发布

阅读量870

点赞数

本文链接：https://blog.csdn.net/Luokaiqin520/article/details/79842499

版权

<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.css1{
background: #FFFF00;
}
.css2{
background: pink;
}

table tr td{
text-align: center;
}

#sex{
width: 155px;
margin-top: 10px;
}

input{
margin-top: 10px;
}
</style>

<script type="text/javascript" src="libs/angular.min.js" ></script>
<script type="text/javascript" src="libs/jquery-1.11.0.min.js" ></script>

<script>
//定义模型
var app = angular.module("App",[]);
//定义控制器
app.controller("mykzq",function($scope){

$scope.datas=[
{"id":1,"name":"张三", "age":3,"sex":"男","phone":15862659042,"hobby":"学习"},
{"id":2, "name":"李四","age":1,"sex":"女","phone":17611561525,"hobby":"敲代码"}];

//添加
$scope.add=function(){
var name = $scope.name;//姓名
var age = parseInt($scope.age);//年龄
var sex = $scope.sex;//性别

var s = "";
if(sex==0){
s="男";
}else{
s="女";
}

var phone = parseInt($scope.phone);//电话
var hobby = $scope.hobby;//爱好

//每次添加进一条数据，数组就+1
var i = $scope.datas.length+1;

//向数组最后添加新的数据
$scope.datas.push({"id":i,"name":name, "age":age,"sex":s,"phone":phone,"hobby":hobby});
}

//删除的功能
$scope.remove=function($index){
$scope.datas.splice($index,1);
}

//ID排序
$scope.order="";

//年龄排序
$scope.ageorder="";

})

</script>
</head>
<body ng-controller="mykzq">

<center>
<form ng-submit="" style="width: 500px; height: 200px;margin-bottom: 20px;">
<fieldset>
<legend>添加用户</legend>
<label>
姓名：<input type="text" id="name" ng-model="name" /><br />
年龄：<input type="text" id="age" ng-model="age" /><br />

性别：<select id="sex" ng-model="sex">
<option value="0">男</option>
<option value="1">女</option>
</select><br />
电话：<input type="text" id="phone" ng-model="phone" /><br />
爱好：<input type="text" id="hobby" ng-model="hobby" /><br />

<input type="button" value="添加" ng-click="add()" style="margin-top: 10px;"/>
<input type="button" value="清空" ng-click="delete()" style="margin-top: 10px; margin-left: 50px;" />
</label>
</fieldset>
</form>

年龄排序：<select ng-model="ageorder" style="margin-right: 20px;">
<option value="age">正序</option>
<option value="-age">倒序</option>
</select>

ID排序：<select ng-model="order" style="margin-right: 20px;">
<option value="id">正序</option>
<option value="-id">倒序</option>
</select>

姓名：<input type="text" placeholder="张三" ng-model="select" style="margin-right: 20px;"/>

<button ng-click="adds()">添加新用户</button>

<table border="1" cellspacing="0" style="width: 50%;margin-top: 20px;">
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>联系方式</th>
<th>爱好</th>
<th>操作</th>
</tr>

<tr ng-repeat="x in datas | orderBy:order | filter:{name:select} | orderBy:ageorder " class="{{$even?'css1':'css2'}}" >
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.sex}}</td>
<td>{{x.phone}}</td>
<td>{{x.hobby}}</td>
<td> <input type="button" value="删除" ng-click="remove($index)" style="color: #f00;"/></td>
</tr>
</table>
</center>

</body>
</html>