下面我就为大家分享一篇AngularJs点击状态值改变背景色的实例，具有很好的参考价值，希望对大家有所帮助。

实例如下：//更改边框颜色的代码 $("#shname").css({"border":"1px solid red"});

//排序有时候下标会错乱 不建议使用 建议使用讲师排序代码

*{

margin: 0 auto;

padding: 0;

}

.p{

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;

}

{{c}}

	id	商品名	用户名	手机号	价格	城市	下单时间	状态
	{{x.id}}	{{x.sname}}	{{x.name}}	{{x.tel}}	{{x.price|currency:"￥:"}}	{{x.cheng}}	{{x.time|date:"MM-dd HH:mm:ss"}}

添加订单信息

商品名

用户名

手机号

价格为

请选择城市

{{xx}}

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[i].flog=true;

}

}else{

for (var i=0;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

if($scope.user[i].flog){

j++;

}

}

if(j==0){

alert("请至少选择一个")

}

//判断所有选中的框 看其状态值为未发货 提示不能删除未发货的

var flog1=true;

for (var i=0;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不发货 通过过滤器设置值为已发货和未发货

//通过以下来设置背景颜色

.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;

}

})

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：