AngularJS排序查询以及添加

最新推荐文章于 2020-09-23 13:46:04 发布

李帅磊

最新推荐文章于 2020-09-23 13:46:04 发布

阅读量198

点赞数

本文链接：https://blog.csdn.net/lishuaileibo/article/details/78754946

版权

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

<script type="text/javascript" src="js/angular.min.js" ></script>
</head>
<body ng-app="myapp" ng-controller="mycr">
<div class="div">
姓名查询条件<input type="text" ng-model="mname"/>

<!--设置初始值为$scope.myage=["按年龄倒序","按年龄升序"];里面的按年龄排序-- >

<select ng-change="xuan()" ng-model="ni" ng-init="ni=myage[0]">
<option ng-repeat="xx in myage">{{xx}}</option>

</select>

<br /><br />
用户列表<br><br />
<table border="1px" cellspacing="1" cellpadding="0" width="400px">
<tr align="center" bgcolor="#999999">
<td>姓名</td>
<td>年龄</td>
<td>拼音</td>
<td>职位</td>
<td>操作</td>
</tr>


<fieldset ng-show="xy">
<legend>添加用户信息</legend>

<center>
姓名
<input type="text" ng-model="tname" /><br /><br />

年龄
<input type="text" ng-model="tage" /><br /><br />

拼音
<td><input type="text" ng-model="tpin" /><br /><br />

职位
<input type="text" ng-model="tzhi" /><br /><br />

<input type="button" value="保存" ng-click="bao()" />

</center>

</fieldset>

</div>

</div>

</body>
<script>
var app=angular.module("myapp",[]);
app.controller("mycr",function($scope){
$scope.user=[{"name":"张三","age":"45","pin":"zhangsan","zhi":"总经理"},{"name":"李四","age":"38","pin":"lisi","zhi":"设计师"},{"name":"王五","age":"45","pin":"wangwu","zhi":"工程师"},{"name":"赵刘","age":"33","pin":"zhaoliu","zhi":"工程师"},{"name":"周七","age":"33","pin":"zhouqi","zhi":"人事经理"}];

$scope.myage=["按年龄倒序","按年龄升序"];
//查询的点击事件
$scope.cha=function(){

//输入框为空提示
if($scope.mname==undefined||$scope.mname==""){
alert("请输入姓名");
}

//过滤关键字的代码 $scope.mname为查询框里面的值
if($scope.mname.indexOf("你")>=0){
alert("不能有关键字");
return ;
}

//没找到的代码
var flog=true;
//遍历数组取到name的值
for (var i=0;i<$scope.user.length;i++) {
var n=$scope.user[i].name;
if(n.indexOf($scope.mname)>=0){
flog=false;
}
}



if(flog){
alert("没找到")
}

//设置过滤器的值为查询条件的值
$scope.cc=$scope.mname;
}



//排序的方法
$scope.xuan=function(){
//alert($scope.ni)
//获取select里面的model的变量值
if ($scope.ni=="按年龄倒序") {
$scope.aa='-age';

}else{
$scope.aa='age';
}
}

//删除的方法
$scope.shan=function($index){
var r=confirm("确定要删除吗");
if (r==true) {
$scope.user.splice($index,1);
}
}

//点击添加显示的方法
$scope.add=function(){
$scope.xy=true;
}

//保存的方法
$scope.bao=function(){
var shu=/^\w+$/;
var shu1=$scope.tage;
if(!shu.test(shu1)){
alert("年龄格式错误")
}else{

//找到文本框输入要添加的值
var ur={"name":$scope.tname,
"age":$scope.tage,
"pin":$scope.tpin,
"zhi":$scope.tzhi
};

//把对象放到集合中

$scope.user.push(ur);

//清空数据
$scope.tname="";
$scope.tpin="";
$scope.tage="";
$scope.tzhi="";