實例如下：
//更改邊框顏色的代碼 $("#shname").css({"border":"1px solid red"});//排序有時候下標會錯亂 不建議使用 建議使用講師排序代碼<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script><script type="text/javascript" src="js/angular.min.js" ></script><style>*{margin: 0 auto;padding: 0;}.div{margin-top: 50px;width: 800px;height: 1000px;}.tian{width: 80px;height: 24px;background: #5CD6FF;}#sp{width: 150px;height: 24px;margin-left: 130px;border-radius: 10px;}#sj{height: 24px;margin-left: 20px;border-radius: 10px;}#st{height: 24px;margin-left: 30px;}#t{width: 14px;height: 14px;position: absolute;margin-left: -24px;padding-top: 6px;}#t1{width: 14px;height: 14px;position: absolute;margin-left: -24px;padding-top: 6px;}#table{margin-top: 50px;}.fh1{background: #FCFC30;}.true {background: greenyellow;border: 0px;border-radius: 3px;}.false {background: yellow;border: 0px;border-radius: 3px;}</style></head><body ng-app="myapp" ng-controller="mycr"><div class="div"><input type="button" value="新增訂單" ng-click="add()" class="tian"/><input type="button" value="批量刪除" ng-click="px()" class="tian"/><input type="text" placeholder="按商品名稱查詢" id="sp" ng-model="msname"/><img src="img/q.png" id="t" ng-click="nameselect()"/><input type="text" placeholder="按手機號查詢" id="sj" ng-model="mytel"/><img src="img/q.png" id="t1" ng-click="sjselect()"/><select id="st" ng-change="myfh()" ng-model="fh" ng-init="fh=cha[0]"><option ng-repeat="c in cha">{{c}}</option></select><table border="1px" cellspacing="1" cellpadding=""0 width="800px" height="30px" id="table"><tr align="center"><td><input type="checkbox" ng-model="qx" ng-click="myqx()"/></td><td>id <input type="button" value="排序" ng-click="idp()"/></td><td>商品名</td><td>用戶名</td><td>手機號</td><td>價格 <input type="button" value="排序" ng-click="jiap()"/></td><td>城市</td><td>下單時間 <input type="button" value="排序" ng-click="ship()"/></td><td>狀態</td></tr><tr align="center" ng-repeat="x in user|filter:{sname:sn}|filter:{tel:sh}|filter:fahuo|orderBy:idpai"><td><input type="checkbox" ng-model="x.flog" ng-click="dx($index)"/></td><td>{{x.id}}</td><td>{{x.sname}}</td><td>{{x.name}}</td><td>{{x.tel}}</td><td>{{x.price|currency:"￥:"}}</td><td>{{x.cheng}}</td><td>{{x.time|date:"MM-dd HH:mm:ss"}}</td><td><input type="button" value="{{x.zhuang|myFilter}}" class="{{x.zhuang}}" ng-click="fahuo1($index)" /></td></tr></table><fieldset ng-show="yc"><legend>添加訂單信息</legend><center>商品名<input type="text" ng-model="shname" id="shname"/><span id="s1"></span><br /><br />用戶名<input type="text" ng-model="username" id="username"/><span id="s2"></span><br /><br />手機號<input type="text" ng-model="mtel" id="mtel"/><span id="s3"></span><br /><br />價格為<input type="text" ng-model="mprice" id="mprice" /><span id="s4"></span><br /><br />請選擇城市<select ng-model="chengshi" ng-init="chengshi=cs[0]" ng-change="xuancs()" style="width: 140px;"><option ng-repeat="xx in cs">{{xx}}</option></select><span id="s5" ></span><br /><br /><input type="button" value="保存" ng-click="baocun()"/></center></fieldset></div></body><script>var app=angular.module("myapp",[]);app.controller("mycr",function($scope){//select列表的值$scope.cha=["按狀態查詢","已發貨","未發貨"];$scope.cs=["請選擇城市","北京","天津","河北","上海"];$scope.user=[{"flog":false,"id":2001,"sname":"IphoneX","name":"張三","tel":"13525654123","price":"8699","cheng":"北京","time":"14560161945000","zhuang":false,},{"flog":false,"id":3006,"sname":"Iphone6","name":"王紅","tel":"12564236541","price":"5635","cheng":"鄭州","time":"1456016212945000","zhuang":false,},{"flog":false,"id":5312,"sname":"Iphone7","name":"趙小龍","tel":"13402651245","price":"6180","cheng":"北京","time":"666016215645000","zhuang":false,},{"flog":false,"id":2314,"sname":"Iphone8","name":"趙強","tel":"17695212525","price":"7190","cheng":"上海","time":"88888162545000","zhuang":false,}]; //按照商品名稱查詢$scope.nameselect=function(){$scope.sn=$scope.msname;//手機號過濾器為空$scope.sh="";}//按照手機號查詢$scope.sjselect=function(){$scope.sh=$scope.mytel;//商品過濾器為空$scope.sn="";}//已發貨和未發貨的點擊事件$scope.myfh=function(){if($scope.fh=="按狀態查詢"){$scope.fahuo="";}else if($scope.fh=="已發貨"){$scope.fahuo=true;$scope.sn="";$scope.sh="";}else{$scope.fahuo=false;$scope.sn=""; $scope.sh=""; }}//全選$scope.myqx=function(){if($scope.qx){for (var i=0;i<$scope.user.length;i++) {$scope.user[i].flog=true;}}else{for (var i=0;i<$scope.user.length;i++) {$scope.user[i].flog=false;} }}//如果有一個沒選全選取消$scope.dx=function($index){if($scope.user[$index].flog==false)$scope.qx=false;}//批量刪除$scope.px=function(){var j=0;for (var i=0;i<$scope.user.length;i++) {if($scope.user[i].flog){j++;}}if(j==0){alert("請至少選擇一個")}//判斷所有選中的框 看其狀態值為未發貨 提示不能刪除未發貨的var flog1=true;for (var i=0;i<$scope.user.length;i++) {if($scope.user[i].flog){if($scope.user[i].zhuang==false)flog1=false;}} if(flog1){for (var i=$scope.user.length-1;i>=0;i--) {if($scope.user[i].flog){$scope.user.splice(i,1);//全部刪除 全選為false$scope.qx=false;}}}else{alert("不能刪除未發貨的")}}//根據id排序的方法var c=0;$scope.idp=function(){c++; if(c%2==1){ $scope.idpai='id'; }else{ $scope.idpai='-id'; }}//根據價格排序的方法$scope.jiap=function(){c++; if(c%2==1){ $scope.idpai='price'; }else{ $scope.idpai='-price'; }}//根據時間排序$scope.ship=function(){c++; if(c%2==1){ $scope.idpai='time'; }else{ $scope.idpai='-time'; }}//點擊新增的話顯示添加$scope.add=function(){$scope.yc=true;}//保存的代碼$scope.baocun=function(){flog= kong($("#shname").val(),"#s1")&&kong($("#username").val(),"#s2")&&kong($("#mtel").val(),"#s3")&&kong($("#mprice").val(),"#s4")&&cheng();if(flog){var tian={"flog":false,"id":"23236","sname":$scope.shname,"name":$scope.username,"tel":$scope.mtel,"price":$scope.mprice,"cheng":$scope.chengshi,"time":"14560201945000","zhuang":false,}//添加到表格中$scope.user.push(tian);//添加完畢后清空$scope.shname="";$scope.username="";$scope.mtel="";$scope.mprice="";//清空后隱藏$scope.yc=false;}}//不為空的方法function kong(k1,s){var k=/^/s*$/;if(k.test(k1)){$(s).html("不能為空");return false;}else{$(s).html("");return true;}}//城市選擇function cheng(){if($scope.chengshi=="請選擇城市"){$("#s5").html("必選");return false;}else{$("#s5").html("");return true;}}/*x.zhang為發貨的狀態值 默認為false不發貨 通過過濾器設置值為已發貨和未發貨<td><input type="button" value="{{x.zhuang|myFilter}}" class="{{x.zhuang}}" ng-click="fahuo1($index)" /></td>//通過以下來設置背景顏色.true {background: greenyellow;border: 0px;border-radius: 3px;}.false {background: yellow;border: 0px;border-radius: 3px;}*///發貨改變值的方法 $scope.fahuo1 = function($index) {if($scope.user[$index].zhuang ){$scope.user[$index].zhuang = false;}else{$scope.user[$index].zhuang = true;}}})//自定義過濾器，根據zhuang的狀態，返回不同的值app.filter("myFilter", function() {return function(input) {if (input) {return "已發貨";} else {return "未發貨";}return input;}})</script></html>以上這篇AngularJs點擊狀態值改變背景色的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
