Angular如何实现搜索、过滤、批量删除、添加、表单验证功能

tangjin

作者

这篇文章将为大家详细讲解有关Angular如何实现搜索、过滤、批量删除、添加、表单验证功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

具体代码如下所示；

Angular如何实现搜索、过滤、批量删除、添加、表单验证功能

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
.sspan{
background:#28a54c;
color:#fff;
margin-left:5px;
}
th,td{
border:1pxsolid#000;
padding:10px;
}
table{
text-align:center;
width:auto;
border-collapse:collapse;
}
button{
margin-top:10px;
margin-bottom:10px;
}
</style>
</head>
<bodyng-app="myapp"ng-controller="myCtrl">
<div>
<inputtype="text"placeholder="用户名搜索"ng-model="yhmss"/>
<inputtype="text"placeholder="手机号搜索"ng-model="sjhss"/>
<selectng-model="Choicecity">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
</select>
<selectng-model="Choicestate">
<option>选择状态</option>
<option>发货</option>
<option>已发货</option>
</select>
<selectng-model="Choiceorder">
<option>开始月份</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
-
<select>
<option>结束月份</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
<buttonng-click="tianjia()">新增订单</button>
<buttonng-click="plsc()">批量删除</button>
<table>
<thead>
<tr>
<th><inputtype="checkbox"ng-model="checkAll"ng-click="quan()"/></th>
<th>id<buttonng-click="sort('id')"class="sspan">排序</button></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<buttonng-click="sort('price')"class="sspan">排序</button></th>
<th>城市</th>
<th>下单时间<buttonng-click="sort('order')"class="sspan">排序</button></th>
<th>状态</th>
</tr>
</thead>
<tbody>
<trng-repeat="itemindata|filter:{name:yhmss}|filter:{phone:sjhss}|filter:cityFun|filter:stateFun|filter:orderFun|orderBy:cc:dd">
<td><inputtype="checkbox"ng-model="item.done"/></td>
<td>{{$index+1}}</td>
<td>{{item.commodity}}</td>
<td>{{item.name}}</td>
<td>{{item.phone}}</td>
<td>{{item.price}}</td>
<td>{{item.city}}</td>
<td>{{item.order}}</td>
<tdng-click="fahuo($index)">{{item.state}}</td>
</tr>
</tbody>
</table>
<divng-show="tj">
<h2>添加</h2>
<formname="registerForm"novalidate>
<divid="email-group">
<labelfor="email">E-mail:</label><inputtype="email"class="form-control"ng-model="email"name="email"id="email"placeholder="请输入电子邮箱..."required>
<p>
<spanng-show="registerForm.email.$invalid">
<spanng-show="registerForm.email.$error.required">*请输入邮箱</span><span
ng-show="registerForm.email.$error.email">*请输入正确的email地址</span>
</span>
</p>
</div>
<divid="name-group">
<labelfor="name">昵称：</label><inputtype="text"class="form-control"ng-model="name"name="name"id="name"placeholder="请输入昵称..."required>
<p>
<spanng-show="registerForm.name.$invalid">
<spanng-show="registerForm.name.$error.required">*请输入姓名</span>
</span>
</p>
</div>
<divid="password-group">
<labelfor="password">密码：</label><inputtype="password"class="form-control"ng-model="password"
ng-minlength="6"ng-maxlength="20"name="password"id="password"
placeholder="请输入密码..."required>
<p>
<spanng-show="registerForm.password.$invalid">
<spanng-show="registerForm.password.$error.minlength">*密码长度不小于6</span>
<spanng-show="registerForm.password.$error.maxlength">*密码长度不超过20</span>
</span>
</p>
</div>
<divid="passwordagaingroup">
<labelfor="passwordagain">再输入一遍密码：</label><inputtype="password"
class="form-control"ng-model="passwordagain"name="passwordagain"
id="passwordagain"placeholder="请再输一遍密码..."required>
<p>
<spanng-show="registerForm.password.$valid">
<spanng-show="passwordagain!=password">*两次密码输入不一致</span>
</span>
</p>
</div>
<buttontype="submit"class="btnbtn-success"ng-click="tianjiapp()"
ng-disabled="registerForm.email.$invalid||registerForm.name.$invalid||registerForm.password.$invalid||password!=passwordagain">
提交<spanclass="fafa-arrow-right"></span>
</button>
</form>
</div>
</body>
</html>
<scriptsrc="angular.js"></script>
<script>
varapp=angular.module("myapp",[]);
app.controller("myCtrl",function($scope){
$scope.data=[
{commodity:"iPhone4",
name:"张三",
phone:151111111,
price:4999,
city:"北京",
order:"8-1",
state:"发货",
done:false
},
{commodity:"小米6",
name:"李四",
phone:15222222,
price:2999,
city:"北京",
order:"8-2",
state:"发货",
done:false
},
{commodity:"华为P9",
name:"王五",
phone:153333333,
price:3999,
city:"上海",
order:"9-3",
state:"已发货",
done:false
},
{commodity:"OPPOR11",
name:"赵六",
phone:15444444,
price:4999,
city:"天津",
order:"9-4",
state:"已发货",
done:false
},
{commodity:"ViVo",
name:"钱七",
phone:155555555,
price:2999,
city:"重庆",
order:"10-4",
state:"已发货",
done:false
}
];
$scope.Choicecity="选择城市";
$scope.cityFun=function(item){
if($scope.Choicecity!="选择城市"){
if(item.city==$scope.Choicecity){
returntrue;
}else{
returnfalse;
}
}else{
returntrue;
}
};
$scope.Choicestate="选择状态";
$scope.stateFun=function(item){
if($scope.Choicestate!="选择状态"){
if(item.state==$scope.Choicestate){
returntrue;
}else{
returnfalse;
}
}else{
returntrue;
}
};
$scope.pl="已发货";
$scope.fahuo=function(index){
if($scope.data[index].state=="发货"){
$scope.data[index].state=$scope.pl;
}
};
$scope.Choiceorder="开始月份";
$scope.orderFun=function(item){
if($scope.Choiceorder!="开始月份"){
vararr=$scope.order.split("-");
varmin=arr[0];
varmax=arr[1];
if(item.order>=min){
returnfalse;
}else{
returntrue;
}
}else{
returntrue;
}
}
$scope.quan=function(){
if($scope.checkAll==true){
for(vari=0;i<$scope.data.length;i++){
$scope.data[i].done=true;
}
}else{
for(vari=0;i<$scope.data.length;i++){
$scope.data[i].done=false;
}
}
};
$scope.plsc=function(){
for(vari=0;i<$scope.data.length;i++){
if($scope.data[i].done==true){
$scope.data.splice(i,1);
i--;
}
}
};
$scope.tj=false;
$scope.tianjia=function(){
$scope.tj=true;
};
$scope.error=false;
$scope.tijiaola=function(){
if($scope.commoditys==null||$scope.names==null||
$scope.commoditys<6||$scope.commoditys.length>20){
$scope.error=true;
}
};
$scope.dd=false;
$scope.cc="id";
$scope.sort=function(couldm){
if($scope.cc==couldm){
$scope.dd=!$scope.dd;
}
$scope.cc=couldm;
}
$scope.tianjiapp=function(){
$scope.data.push({commodity:$scope.email,name:$scope.name,phone:$scope.password})
}
})
</script>

关于“Angular如何实现搜索、过滤、批量删除、添加、表单验证功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

阅读全文

发布于 2021-07-09 21:18:37

angular