AngularJs點(diǎn)擊狀態(tài)值改變背景色的實(shí)例

第AngularJs點(diǎn)擊狀態(tài)值改變背景色的實(shí)例//更改邊框顏色的代碼$("#shname").css({"border":"1pxsolidred"});

//排序有時候下標(biāo)會錯亂不建議使用建議使用講師排序代碼

!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="按手機(jī)號查詢"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()"http://td

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

td商品名/td

td用戶名/td

td手機(jī)號/td

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

td城市/td

td下單時間nbsp;nbsp;inputtype="button"value="排序"ng-click="ship()"http://td

td狀態(tài)/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)"http://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)"http://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/

手機(jī)號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=["按狀態(tài)查詢","已發(fā)貨","未發(fā)貨"];

$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