angular增，删，查，排序

最新推荐文章于 2023-10-20 10:02:51 发布

jun_tong

最新推荐文章于 2023-10-20 10:02:51 发布

阅读量169

点赞数

分类专栏： html5 之混合开发

本文链接：https://blog.csdn.net/jun_tong/article/details/79875944

版权

html5 之混合开发专栏收录该内容

35 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module("App",[]);
app.controller("Democtrl",function($scope){
$scope.datas=[{
id:01,
name:"张三",
sex:"男",
age:"21",
tel:13312341234,
like:"学习"
},{
id:02,
name:"李四",
sex:"女",
age:"25",
tel:13312354321,
like:"学习"
},{
id:03,
name:"王五",
sex:"男",
age:"24",
tel:18812341234,
like:"看书"
}];
$scope.addshow=false;
$scope.del=function($index){
$scope.datas.splice($index,1);
}
$scope.show=function(){
$scope.addshow=true;
}
$scope.add=function(){
var newdatas={
id:$scope.newid,
name:$scope.newname,
sex:$scope.newsex,
age:$scope.newage,
tel:$scope.newtel,
like:$scope.newlike
}
$scope.datas.push(newdatas);
}
$scope.move=function(){
$scope.newid=""
$scope.newname=""
$scope.newsex=""
$scope.newage=""
$scope.newtel=""
$scope.newlike=""
}
})
</script>
<style>
table tr:nth-child(odd){
background-color: cornflowerblue;
text-align: center;
}
table tr:nth-child(even){
text-align: center;
}
</style>
<title>
</title>
</head>
<body ng-controller="Democtrl">
年龄排序
<select ng-model="a">
<option value="age">正序</option>
<option value="-age">倒序</option>
</select>
id排序
<select ng-model="b">
<option value="id">正序</option>
<option value="-id">倒序</option>
</select>
姓名
<input type="text" placeholder="请输入要查询的名字..." ng-model="seacrhname"/>
<input type="button" id="" value="添加新用户" ng-click="show()"/>
<table border="1" cellspacing="0" cellpadding="1" style="width: 100%;">
<tr style="background-color: darkgrey;">
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>联系方式</th>
<th>爱好</th>
<th>操作</th>
</tr>
<tr ng-repeat="x in datas|filter:{name:seacrhname}|orderBy:a|orderBy:b">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td>{{x.sex}}</td>
<td>{{x.tel}}</td>
<td>{{x.like}}</td>
<td><a href="#" ng-click="del($index)" style="color: red;">删除</a></td>
</tr>
</table>
<div ng-show="addshow" style="border: 1;border-color:black;border-style:solid;width: 500px;height: 300px;margin-left: 400px;margin-top: 50px;">
<p> 添加用户</p>
<p style="margin-left: 50px;">
id<input type="text" ng-model="newid"/><br />
姓名 <input type="text" ng-model="newname"/><br />
年龄 <input type="text" ng-model="newage"/><br />
性别 <select ng-model="newsex">
<option value="男">男</option>
<option value="女">女</option>
</select><br />
联系方式 <input type="text" ng-model="newtel"/><br />
爱好 <textarea rows="5" cols="15" ng-model="newlike">
</textarea><br />
<input type="button" value="添加" ng-click="add()"/>           <input type="button" value="清空" ng-click="move()"/>
</p>
</div>
</body>
</html>

jun_tong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular增，删，查，排序

&lt;!DOCTYPE html&gt;&lt;html ng-app="App"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"&gt;&amp
复制链接

扫一扫

专栏目录