AngularJs點擊狀態(tài)值改變背景色的實例
更新時間：2017年12月18日 15:29:39 作者：王zhiqiang
下面小編就為大家分享一篇AngularJs點擊狀態(tài)值改變背景色的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
實例如下：
//更改邊框顏色的代碼 $("#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>狀態(tài)</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=["按狀態(tài)查詢","已發(fā)貨","未發(fā)貨"];
$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="";
}
//已發(fā)貨和未發(fā)貨的點擊事件
$scope.myfh=function(){
if($scope.fh=="按狀態(tài)查詢"){
$scope.fahuo="";
}else if($scope.fh=="已發(fā)貨"){
$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("請至少選擇一個")
}
//判斷所有選中的框 看其狀態(tài)值為未發(fā)貨 提示不能刪除未發(fā)貨的
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("不能刪除未發(fā)貨的")
}
}
//根據(jù)id排序的方法
var c=0;
$scope.idp=function(){
c++;
if(c%2==1){
$scope.idpai='id';
}else{
$scope.idpai='-id';
}
}
//根據(jù)價格排序的方法
$scope.jiap=function(){
c++;
if(c%2==1){
$scope.idpai='price';
}else{
$scope.idpai='-price';
}
}
//根據(jù)時間排序
$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為發(fā)貨的狀態(tài)值 默認為false不發(fā)貨 通過過濾器設(shè)置值為已發(fā)貨和未發(fā)貨
<td><input type="button" value="{{x.zhuang|myFilter}}" class="{{x.zhuang}}" ng-click="fahuo1($index)" /></td>
//通過以下來設(shè)置背景顏色
.true {
background: greenyellow;
border: 0px;
border-radius: 3px;
}
.false {
background: yellow;
border: 0px;
border-radius: 3px;
}
*/
//發(fā)貨改變值的方法
$scope.fahuo1 = function($index) {
if($scope.user[$index].zhuang ){
$scope.user[$index].zhuang = false;
}else{
$scope.user[$index].zhuang = true;
}
}
})
//自定義過濾器，根據(jù)zhuang的狀態(tài)，返回不同的值
app.filter("myFilter", function() {
return function(input) {
if (input) {
return "已發(fā)貨";
} else {
return "未發(fā)貨";
}
return input;
}
})
</script>
</html>
以上這篇AngularJs點擊狀態(tài)值改變背景色的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Angularjs中的ui-bootstrap的使用教程,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
詳解angular部署到iis出現(xiàn)404解決方案
這篇文章主要介紹了詳解angular部署到iis出現(xiàn)404解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了cnpm加速Angular項目創(chuàng)建的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了angularjs實現(xiàn)的購物金額計算工具,涉及AngularJS事件監(jiān)聽、數(shù)值計算相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
指令（Directives）是所有AngularJS應(yīng)用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令，但還是經(jīng)常需要創(chuàng)建應(yīng)用特定的指令2016-03-03
angularjs客戶端實現(xiàn)壓縮圖片文件并上傳實例
這篇文章主要介紹了angularjs客戶端實現(xiàn)壓縮圖片文件并上傳實例,本文直接給出代碼實例,需要的朋友可以參考下2015-07-07
本文主要介紹AngularJS 自定義指令,這里整理了基礎(chǔ)資料及詳細的示例代碼及實現(xiàn)效果圖，有需要的小伙伴可以參考下2016-08-08
Angular6 發(fā)送手機驗證碼按鈕倒計時效果實現(xiàn)方法
這篇文章主要介紹了Angular6 發(fā)送手機驗證碼按鈕倒計時效果實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
Angular中$broadcast和$emit的使用方法詳解
本篇文章主要介紹了Angular中$broadcast和$emit的使用方法詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
AngularJS框架中的雙向數(shù)據(jù)綁定機制詳解【減少需要重復的開發(fā)代碼量】
這篇文章主要介紹了AngularJS框架中的雙向數(shù)據(jù)綁定機制,結(jié)合實例形式分析了AngularJS雙向數(shù)據(jù)綁定機制的原理及實現(xiàn)方法,以及減少需要重復開發(fā)代碼量的優(yōu)勢,需要的朋友可以參考下2017-01-01