Angularjs的增删改查反选全选排序

来源：互联网发布：软件可靠性测试分析编辑：程序博客网时间：2024/06/07 19:35
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><script type="text/javascript" src="js/angular.min.js" ></script><script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script></head><body ng-app="myApp" ng-controller="myCtrl"><input type="button" value="反选" ng-click="fan()"/><input type="button" value="批量删除" ng-click="piliang()"/>用户名<input type="text" ng-model="name2" ng-keydown="cha($event)" /><input type="button" value="查询" ng-click="select()" /><select ng-change="chang()" ng-model="age" ng-init="age=ages[0]"><option ng-repeat="g in ages">{{g}}</option></select><input type="button" value="添加" ng-click="add()"/><table border="1px" cellpadding="0px" cellspacing="0px" width="600px"><tr><th><input type="checkbox" ng-click="quan()"></th><th>姓名</th><th>年龄</th><th>城市</th><th>录入日期</th><th>操作</th></tr><tr ng-repeat="good in goods"><th><input type="checkbox" class="ck2" ng-click="change2($index)"></th><th>{{good.name}}</th><th>{{good.age}}</th><th>{{good.city}}</th><th>{{good.time|date:"yyyy-MM-dd"}}</th><th><input type="button" value="修改" ng-click="update($index)"><input type="button" value="删除" ng-click="dele($index)"></th></tr></table><fieldset ng-show="show">  <legend>添加信息</legend>  姓名:<input type="text" ng-model="name1" /><br />    年龄:<input type="text" ng-model="age1" /><br />      城市:<input type="text" ng-model="city1" /><br />        <input type="button" value="ok" ng-click="ok()" /><br /></fieldset><script>var mo=angular.module("myApp",[]);mo.controller("myCtrl",function($scope){var arr=[{"name":"张三","age":21,"city":"山西","time":134566234347},{"name":"李四","age":23,"city":"北京","time":456745623457},{"name":"王五","age":24,"city":"青岛","time":435676574327}]$scope.goods=arr;//按年龄排序$scope.ages=["按年龄倒序","按年龄正序"]$scope.chang=function(){var a=$scope.age;if(a=="按年龄倒序"){arr.sort(function(a,b){return b.age-a.age;})}else{arr.sort(function(a,b){return a.age-b.age;})}}//删除$scope.dele=function($index){arr.splice($index,1);}//修改$scope.update=function($index){$scope.show=true;$scope.name1=arr[$index].name;$scope.age1=arr[$index].age;$scope.city1=arr[$index].city;$scope.ok=function(){arr[$index].name=$scope.name1,arr[$index].age=$scope.age1,arr[$index].city=$scope.city1$scope.goods=arr;$scope.show=false;}}//添加$scope.add=function(){$scope.show=true;}$scope.ok=function(){ var name1= $scope.name1;  var age1= $scope.age1;   var city1= $scope.city1;   //判断用户名不能为空if(name1==undefined){alert("用户名不能为空")return}//判断用户名不能重复for(var i=0;i<arr.length;i++){if(arr[i].name==$scope.name1){alert("用户名不能重复")return}}//判断年龄不能为空if(age1==undefined){alert("年龄不能为空")return}//判断年龄只能是纯数字if(isNaN(age1)){alert("年龄只能是数字")return}if(age1.length>3){alert("年龄不能大于3位")return}//判断城市不能为空if(city1==undefined){alert("城市不能为空")return}var g={"name":$scope.name1,"age":$scope.age1,"city":$scope.city1,"time":new Date().getTime()}arr.push(g);$scope.goods=arr;$scope.show=false;}////模糊查询//$scope.cha=function($event){////定义一个临时数组//var newgoods=[];////获取数值//var name2=$scope.name2;//var keyCode=$event.keyCode;//if(keyCode==13)//{//for(var i=0;i<arr.length;i++)//{//if(arr[i].name.indexOf(name2)!=-1)//{//newgoods.push(arr[i])//}//}//$scope.goods=newgoods;//}//}                     //精确查询                     $scope.select=function(){                      //定义一个临时数组                     var newpager=[];                     //获取值                     var na=$scope.name2;                                          if(na=="")                     {                     alert("不能为空")                     return                     }                                          for(var i=0;i<arr.length;i++)                     {                     var m=arr[i].name;                                          if(na==m)                     {                     newpager.push(arr[i])                     }                                            }                     if(newpager==0){                     alert("没有匹配项")                     return                     }                     $scope.goods=newpager;                     }                                        //批量删除                    $scope.piliang=function(){                    var ck=$("input[class='ck2']:checked");                    for(var i=0;i<ck.length;i++)                    {                    var cj=ck[i];                    cj.parentNode.parentNode.remove();                    }                    }                                         //根据复选框的索引,改变flag值                    $scope.change2=function($index)                    {                    $scope.goods[$index].flag=!$scope.goods[$index].flag;                    }                    //全选                    var f=true;                    $scope.quan=function(){                    var cbs=$("input[class=ck2]");                    for(var i=0;i<cbs.length;i++)                    {                    var ck2=cbs[i];                    ck2.checked=f;                    arr[i].flag=f;                    }                    f=!f;                    }                                        //反选                    $scope.fan=function(){                    var r=$("input[class=ck2]")                    for(var i=0;i<r.length;i++)                    {                    r[i].checked=!r[i].checked;                    arr[i].isChecked=!arr[i].isChecked                    }                    }})</script></body></html>
阅读全文
0 0