AngularJs如何实现点击状态值改变背景色

//更改边框颜色的代码 $("#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; } .fh2{ 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()" > <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>

相关阅读