在AngularJs中點選狀態如何改變背景色-js教程-PHP中文網

首頁

web前端

js教程

在AngularJs中點選狀態如何改變背景色

亚连

Jun 19, 2018 pm 06:03 PM

angularjs 改變點選背景色

下面我就為大家分享一篇AngularJs點擊狀態值改變背景色的實例，具有很好的參考價值，希望對大家有幫助。

實例如下：

//更改边框颜色的代码  $("#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;
}
.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;
}
</style>
</head>
<body ng-app="myapp" ng-controller="mycr">
<p class="p">
<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>状态</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>
</p>
</body>
<script>
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.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("请至少选择一个")
}

//判断所有选中的框  看其状态值为未发货 提示不能删除未发货的
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("不能删除未发货的")
}
}
//根据id排序的方法
var c=0;
$scope.idp=function(){
c++;
 if(c%2==1){
 $scope.idpai=&#39;id&#39;;
  
 }else{
 $scope.idpai=&#39;-id&#39;;
 
 }
}
//根据价格排序的方法
$scope.jiap=function(){
c++;
 if(c%2==1){
 $scope.idpai=&#39;price&#39;;
  
 }else{
 $scope.idpai=&#39;-price&#39;;
 
 }
}
//根据时间排序
$scope.ship=function(){
c++;
 if(c%2==1){
 $scope.idpai=&#39;time&#39;;
  
 }else{
 $scope.idpai=&#39;-time&#39;;
 
 }
}

//点击新增的话显示添加
$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不发货  通过过滤器设置值为已发货和未发货
<td><input type="button" value="{{x.zhuang|myFilter}}" class="{{x.zhuang}}" ng-click="fahuo1($index)" /></td>
//通过以下来设置背景颜色
.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;
}

})
</script>
</html>

登入後複製

上面是我整理給大家的，希望今後會對大家有幫助。

使用casperjs和resemble.js如何實作像素對比（詳細教學）

##使用async-validator如何寫Form元件（詳細教學）

使用微信小程式有關傳參數的方法，有哪些？

以上是在AngularJs中點選狀態如何改變背景色的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1321

PHP教程

1269

C# 教程

1249

Related knowledge

谷歌瀏覽器背景色怎麼改？谷歌瀏覽器背景色設定方法 Mar 13, 2024 pm 01:40 PM

　　谷歌瀏覽器的背景是預設的，那我們想要更換該怎麼設定呢？谷歌瀏覽器是具有修改背景顏色功能的，但是很多新手夥伴不清楚如何修改，其實很簡單，下面小編帶來的谷歌瀏覽器修改背景顏色步驟方法，感興趣的話一起來看看吧。　　修改方法　　1、先打開Google瀏覽器，點選右上角的三點。　　2、然後出現下拉框，點選設定。　　3、接著點擊自訂您的Chrome個人資料。　　4、最後選擇喜歡的顏色，瀏覽器的背景就會自動變色。

在iPhone iOS 17上如何設定多個計時器 Sep 18, 2023 am 09:01 AM

在iOS17中，您可以使用時鐘應用程式在iPhone上設定多個計時器，或使用Siri免持設定。我們在本文中討論了兩者。讓我們來看看它們。使用時鐘應用程式在iPhone上設定多個計時器打開iPhone上的時鐘應用程序，然後點擊右下角的計時器選項卡。現在，設定小時、分鐘和秒。您可以使用「標籤」和「計時器何時結束」選項來設定計時器的名稱以及計時器完成時的首選音調。這將幫助您區分計時器。完成後，點擊“開始”按鈕。然後，點擊右上角的「+」圖示。現在，重複上述步驟以在iPhone上設定多個計時器。您還可以瀏

如何在 iPhone 上關閉鬧鐘 [2023] Aug 21, 2023 pm 01:25 PM

自從智慧型手機問世以來，它們無疑取代了鬧鐘。如果您擁有iPhone，則可以使用時鐘應用程式在一天中的多個場合輕鬆設定任意數量的鬧鐘。該應用程式可讓您配置鬧鐘時間，提示音，重複的頻率，以及您是否希望使用“貪睡”選項來延遲它們。如果您想關閉已設定的鬧鐘，以下貼文應該可以幫助您停用和刪除iPhone上的常規鬧鐘和喚醒鬧鐘。如何在iPhone上關閉常規鬧鐘預設情況下，當您在時鐘應用程式上添加鬧鐘或要求Siri為您添加鬧鐘時，您實際上是在創建常規鬧鐘。您可以在iPhone上創建任意數量的鬧鐘，並且可以將它們

如何在iPhone上的「通訊錄」中設定我的名片 [2023] Sep 22, 2023 pm 09:17 PM

借助iOS中的“我的名片”，您可以建立個人化的聯絡人名片，Siri和其他服務可識別該名片，並與您和您的電話號碼相關聯。隨著iOS17中聯絡人海報的引入，「我的卡片」變得非常重要，因為它現在用於創建您的聯絡人海報。如果您渴望啟動並運行聯絡人海報，則必須從設定「我的名片」開始。我們將逐步介紹如何創建「我的名片」以及如何使其與Siri和您的聯絡人海報順利配合使用。如何在iPhone上的“通訊錄”中設定“我的名片”[2023]如果您是首次在iPhone上設定“我的名片”，則必須僅透過“通訊錄”應用程式進行設

製作 iPhone 上 iOS 17 提醒應用程式中的購物清單的方法 Sep 21, 2023 pm 06:41 PM

如何在iOS17中的iPhone上製作GroceryList在「提醒事項」應用程式中建立GroceryList非常簡單。你只需添加一個列表，然後用你的項目填充它。該應用程式會自動將您的商品分類，您甚至可以與您的伴侶或扁平夥伴合作，列出您需要從商店購買的東西。以下是執行此操作的完整步驟：步驟1：開啟iCloud提醒事項聽起來很奇怪，蘋果表示您需要啟用來自iCloud的提醒才能在iOS17上建立GroceryList。以下是它的步驟：前往iPhone上的「設定」應用，然後點擊[您的姓名]。接下來，選擇i

美團外送商家版起送價怎麼改 Mar 27, 2024 pm 07:20 PM

在美團外送商家版的營運過程中，起送價的設定是至關重要的環節。合理的起送價不僅能幫助商家控製成本，還能在一定程度上提升訂單金額，進而增加整體收益。然而，許多商家對於如何修改起送價並不十分了解。那麼在下文中本站小編就將為各位商家們帶來詳細的起送價設定攻略，想要了解的話就快來下文中一探究竟吧！在美團外帶商家中心，透過登入後進入店鋪設置，然後選擇門市管理，在門市管理頁面頂部的切換導航中，選中配送信息，接著點擊新增配送區域即可完成操作。在您新增地點後，系統將自動顯示相應的配送費用。完成訂單後，您將獲

如何在iPhone上更改聯絡人照片 Jun 08, 2023 pm 03:44 PM

iOS17終於來了，它包含了許多新功能。讓我們在今天的教學中學習如何在iPhone上更改聯絡人照片。蘋果最近的WWDC2023活動推出了一系列令人興奮的產品和即將推出的軟體更新。 iOS17的顯著功能之一是自訂您的聯絡人照片和海報的選項，提供了一種獨特的方式在其他人在iPhone上收到您的電話時向他們打招呼。 iOS的這項創新功能旨在增強電話通話的個人化和使用者友善性，讓您選擇在收件者螢幕上的顯示方式。如果您渴望親身體驗這項新功能，並在撥打電話時以個性化的方式問候您的親人，這裡有有關如何在iPho

2022年最新5款的angularjs教學從入門到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一個非常有個性的語言. 無論是從程式碼的組織, 還是程式碼的程式設計範式, 或物件導向理論都獨具一格. 而很早就在爭論的Javascript 是不是物件導向語言這個問題, 顯然已有答案. 但是, 即使Javascript 叱吒風雲二十年, 如果想要看懂jQuery, Angularjs, 甚至是React 等流行框架, 觀看《黑馬雲課堂JavaScript 高級框架設計視頻教程》就對了。

See all articles

在AngularJs中點選狀態如何改變背景色

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題