AngularJs点击状态值改变背景色的实例

第AngularJs点击状态值改变背景色的实例//更改边框颜色的代码$("#shname").css({"border":"1pxsolidred"});

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

!DOCTYPEhtml

html

head

metacharset="UTF-8"

title/title

scripttype="text/javascript"src="js/jquery-1.11.0.min.js"/script

scripttype="text/javascript"src="js/angular.min.js"/script

style

margin:0auto;

padding:0;

.div{

margin-top:50px;

width:800px;

height:1000px;

.tian{

width:80px;

height:24px;

background:#5CD6FF;

width:150px;

height:24px;

margin-left:130px;

border-radius:10px;

height:24px;

margin-left:20px;

border-radius:10px;

height:24px;

margin-left:30px;

width:14px;

height:14px;

position:absolute;

margin-left:-24px;

padding-top:6px;

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

bodyng-app="myapp"ng-controller="mycr"

div

inputtype="button"value="新增订单"ng-click="add()"/

inputtype="button"value="批量删除"ng-click="px()"/

inputtype="text"placeholder="按商品名称查询"id="sp"ng-model="msname"/

imgsrc="img/q.png"id="t"ng-click="nameselect()"/

inputtype="text"placeholder="按手机号查询"id="sj"ng-model="mytel"/

imgsrc="img/q.png"id="t1"ng-click="sjselect()"/

selectid="st"ng-change="myfh()"ng-model="fh"ng-init="fh=cha[0]"

optionng-repeat="cincha"{{c}}/option

/select

tableborder="1px"cellspacing="1"cellpadding=""0width="800px"height="30px"id="table"

tralign="center"

tdinputtype="checkbox"ng-model="qx"ng-click="myqx()"//td

tdidnbsp;nbsp;inputtype="button"value="排序"ng-click="idp()"//td

td商品名/td

td用户名/td

td手机号/td

td价格nbsp;nbsp;inputtype="button"value="排序"ng-click="jiap()"//td

td城市/td

td下单时间nbsp;nbsp;inputtype="button"value="排序"ng-click="ship()"//td

td状态/td

/tr

tralign="center"ng-repeat="xinuser|filter:{sname:sn}|filter:{tel:sh}|filter:fahuo|orderBy:idpai"

tdinputtype="checkbox"ng-model="x.flog"ng-click="dx($index)"//td

td{{x.id}}/td

td{{x.sname}}/td

td{{}}/td

td{{x.tel}}/td

td{{x.price|currency:"￥:"}}/td

td{{x.cheng}}/td

td{{x.time|date:"MM-ddHH:mm:ss"}}/td

tdinputtype="button"value="{{x.zhuang|myFilter}}"ng-click="fahuo1($index)"//td

/tr

/table

fieldsetng-show="yc"

legend添加订单信息/legend

center

商品名inputtype="text"ng-model="shname"id="shname"/

spanid="s1"/spanbr/br/

用户名inputtype="text"ng-model="username"id="username"/

spanid="s2"/spanbr/br/

手机号inputtype="text"ng-model="mtel"id="mtel"/

spanid="s3"/spanbr/br/

价格为inputtype="text"ng-model="mprice"id="mprice"/

spanid="s4"/spanbr/br/

请选择城市selectng-model="chengshi"ng-init="chengshi=cs[0]"ng-change="xuancs()"

optionng-repeat="xxincs"{{xx}}/option

/select

spanid="s5"/spanbr/br/

inputtype="button"value="保存"ng-click="baocun()"/

/center

/fieldset

/div

/body

script

varapp=angular.module("myapp",[]);

app.controller("mycr",function($scope){

//select列表的值

$scope.cha=["按状态查询","已发货","未发货"];

$scope.cs=["请选择城市","北京","天津","河北","上海"];

$scope.user=[{

"flog":false,

"id":2001,

"sname":"IphoneX",

"name":"张三",

"tel":,

"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":,

"price":"6180",

"chen