SoFunction
Updated on 2025-04-10

AngularJs click on the status value to change the background color

AngularJs click on the status value to change the background color

Updated: December 18, 2017 15:29:39 Author: Wang zhiqiang
Below, the editor will share with you an example of AngularJs click status value changing background color, which has good reference value and hope it will be helpful to everyone. Let's take a look with the editor

Examples are as follows:

//Code to change the border color $("#shname").css({"border":"1px solid red"});//Sorting sometimes the subscript will be incorrect. It is not recommended to use it. It is recommended to use the instructor sorting code.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11." ></script>
<script type="text/javascript" src="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="Add a new order" ng-click="add()" class="tian"/>
<input type="button" value="Batch Delete" ng-click="px()" class="tian"/>
<input type="text" placeholder="Query by product name"  ng-model="msname"/>
<img src="img/"  ng-click="nameselect()"/>
<input type="text" placeholder="Check by mobile phone number"  ng-model="mytel"/>
<img src="img/"  ng-click="sjselect()"/>
<select  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" >
<tr align="center">
<td><input type="checkbox" ng-model="qx" ng-click="myqx()"/></td>
<td>id  <input type="button" value="Sorting" ng-click="idp()"/></td>
<td>Product Name</td>
<td>username</td>
<td>Phone number</td>
<td>price  <input type="button" value="Sorting" ng-click="jiap()"/></td>
<td>City</td>
<td>Order time  <input type="button" value="Sorting" ng-click="ship()"/></td>
<td>state</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="" ng-click="dx($index)"/></td>
<td>{{}}</td>
<td>{{}}</td>
<td>{{}}</td>
<td>{{}}</td>
<td>{{|currency:"￥:"}}</td>
<td>{{}}</td>
<td>{{|date:"MM-dd HH:mm:ss"}}</td>
<td><input type="button" value="{{|myFilter}}" class="{{}}" ng-click="fahuo1($index)" /></td>
</tr>
</table>
<fieldset ng-show="yc">
<legend>Add order information</legend>
<center>
Product Name<input type="text" ng-model="shname" />
<span ></span><br /><br />
username<input type="text" ng-model="username" />
<span ></span><br /><br />
Phone number<input type="text" ng-model="mtel" />
<span ></span><br /><br />
price为<input type="text" ng-model="mprice"  />
<span ></span><br /><br />
请选择City<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  ></span><br /><br />
<input type="button" value="save" ng-click="baocun()"/>
</center>
</fieldset>
</div>
</body>
<script>
var app=("myapp",[]);
("mycr",function($scope){
//Select the value of the list$=["Query by status","Shipped","Not shipped"];
$=["Please select a city","Beijing","Tianjin","Hebei","Shanghai"];
$=[{
"flog":false,
"id":2001,
"sname":"IphoneX",
"name":"Zhang San",
"tel":"13525654123",
"price":"8699",
"cheng":"Beijing",
"time":"14560161945000",
"zhuang":false,
},
{
"flog":false,
"id":3006,
"sname":"Iphone6",
"name":"Wang Hong",
"tel":"12564236541",
"price":"5635",
"cheng":"Zhengzhou",
"time":"1456016212945000",
"zhuang":false,
},
{
"flog":false,
"id":5312,
"sname":"Iphone7",
"name":"Zhao Xiaolong",
"tel":"13402651245",
"price":"6180",
"cheng":"Beijing",
"time":"666016215645000",
"zhuang":false,
},
{
"flog":false,
"id":2314,
"sname":"Iphone8",
"name":"Zhao Qiang",
"tel":"17695212525",
"price":"7190",
"cheng":"Shanghai",
"time":"88888162545000",
"zhuang":false,
}
];
  

//Check by product name$=function(){
$=$;
//The mobile phone number filter is empty$="";
}
//Check by mobile phone number$=function(){
$=$;
//The product filter is empty$="";
}
//Send and unshipped click events$=function(){
if($=="Query by status"){
$="";
}else if($=="Shipped"){
$=true;
$="";
$="";
}else{
$=false;
$="";
   $="";
     
}
}
//Select all$=function(){
if($){
for (var i=0;i<$;i++) {
$[i].flog=true;
}
}else{
for (var i=0;i<$;i++) {
$[i].flog=false;
} 
}
}
//If there is no selection, select all Cancel$=function($index){
if($[$index].flog==false)
$=false;
}
//Batch Delete$=function(){
var j=0;
for (var i=0;i<$;i++) {
if($[i].flog){
j++;
}
}
if(j==0){
alert("Please select at least one")
}

//Judge all selected boxes and see that their status value is not shipped. It is prompted that the unshipped ones cannot be deleted.var flog1=true;
for (var i=0;i<$;i++) {
if($[i].flog){
if($[i].zhuang==false)
flog1=false;
}
} 

if(flog1){
for (var i=$-1;i>=0;i--) {
if($[i].flog){
$(i,1);
//Delete all Select as false$=false;
}
}
}else{
alert("Unshipped" cannot be deleted)
}
}
//Sorting method by idvar c=0;
$=function(){
c++;
 if(c%2==1){
 $='id';
  
 }else{
 $='-id';
 
 }
}
//Sorting method according to price$=function(){
c++;
 if(c%2==1){
 $='price';
  
 }else{
 $='-price';
 
 }
}
//Sort by time$=function(){
c++;
 if(c%2==1){
 $='time';
  
 }else{
 $='-time';
 
 }
}

// If you click Add, you will add it$=function(){
$=true;
}
//Save code$=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":$,
"name":$,
"tel":$,
"price":$,
"cheng":$,
"time":"14560201945000",
"zhuang":false,
}
//Add to the table$(tian);
//Clear after adding$="";
$="";
$="";
$="";
//Hide after clearing$=false;
}
}

//The method not emptyfunction kong(k1,s){
var k=/^\s*$/;
if((k1)){
$(s).html("Can't be empty");
return false;
}else{
$(s).html("");
return true;
}
}
//City selectionfunction cheng(){
if($=="Please select a city"){
$("#s5").html("Required");return false;
}else{
$("#s5").html("");
return true;
}
}
/* is the status value of shipment. Default is false. Don't ship. Set the value through filter to shipped and not shipped.
 <td><input type="button" value="{{|myFilter}}" class="{{}}" ng-click="fahuo1($index)" /></td>
 //Set the background color by following
 .true {
 background: greenyellow;
 border: 0px;
 border-radius: 3px;
 }
 .false {
 background: yellow;
 border: 0px;
 border-radius: 3px;
 }
 */
//How to change the value of the shipment   
$scope.fahuo1 = function($index) {
if($[$index].zhuang ){
$[$index].zhuang = false;
}else{
$[$index].zhuang = true;
}
}
})


//Custom filter, return different values ​​according to the status of zhuang("myFilter", function() {

return function(input) {
if (input) {
return "Shipped";
} else {
return "Not shipped";
}
return input;
}

})
&lt;/script&gt;
&lt;/html&gt;

The above example of AngularJs click status value changing background color is all the content I share with you. I hope you can give you a reference and I hope you can support me more.

  • AngularJs
  • Click
  • Status value
  • Change
  • Background color

Related Articles

  • Tutorial on using ui-bootstrap in Angularjs

    This article mainly introduces the tutorial on using ui-bootstrap in Angularjs. It is very good and has reference value. Friends who need it can refer to it.
    2017-02-02

  • Detailed explanation of the angular deployment to iis 404 solution

    This article mainly introduces a detailed explanation of the angular deployment to IIS 404 solution. The editor thinks it is quite good. I will share it with you now and give you a reference. Let's take a look with the editor
    2018-08-08

  • How to speed up Angular project creation by cnpm

    This article mainly introduces the method of cnpm to accelerate the creation of Angular projects. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let's take a look with the editor
    2018-09-09

  • Example of shopping amount calculation tool implemented by angularjs

    This article mainly introduces the shopping amount calculation tool implemented by angularjs, involving AngularJS event monitoring and numerical calculation related operation techniques. Friends who need it can refer to it
    2018-05-05

  • A brief analysis of the instructions in AngularJS

    Directives are the most important part of all AngularJS applications. Although AngularJS already provides very rich instructions, it is often necessary to create application-specific instructions.
    2016-03-03

  • angularjs client implements compressing image files and uploading instances

    This article mainly introduces the angularjs client to implement compressed image files and upload instances. This article directly gives code examples. Friends who need it can refer to it.
    2015-07-07

  • Detailed explanation of AngularJS custom directives and sample code

    This article mainly introduces AngularJS custom instructions. Here we organize basic information, detailed sample code and implementation renderings. Friends who need it can refer to it.
    2016-08-08

  • Angular6 method to realize the countdown effect of sending mobile phone verification code button

    This article mainly introduces the method of implementing the countdown effect of Angular6 sending mobile phone verification code button. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let's take a look with the editor
    2019-01-01

  • Detailed explanation of how to use $broadcast and $emit in Angular

    This article mainly introduces a detailed explanation of the usage methods of $broadcast and $emit in Angular. It has certain reference value. Interested friends can refer to it.
    2017-05-05

  • Detailed explanation of the two-way data binding mechanism in the AngularJS framework [Reduce the amount of development code that needs to be repeated]

    This article mainly introduces the two-way data binding mechanism in the AngularJS framework. It analyzes the principles and implementation methods of the AngularJS bi-way data binding mechanism in combination with examples, as well as the advantages of reducing the amount of code that needs to be repetitively developed. Friends who need it can refer to it.
    2017-01-01

Latest Comments