AngularJs点击状态值改变背景色

最新推荐文章于 2022-01-25 14:10:49 发布
最新推荐文章于 2022-01-25 14:10:49 发布
阅读量1.7k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lishuaileibo/article/details/78796291
版权

//更改边框颜色的代码   $("#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&nbsp;&nbsp;<input type="button" value="排序" ng-click="idp()"/></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格&nbsp;&nbsp;<input type="button" value="排序" ng-click="jiap()"/></td>
<td>城市</td>
<td>下单时间&nbsp;&nbsp;<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>
</div>
</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='id';
   
  }else{
  $scope.idpai='-id';
 
  }
}

//根据价格排序的方法

$scope.jiap=function(){
c++;
  if(c%2==1){
  $scope.idpai='price';
   
  }else{
  $scope.idpai='-price';
 
  }
}

//根据时间排序
$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为发货的状态值   默认为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>
李帅磊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularJs点击状态值改变背景色的实例
10-18
下面小编就为大家分享一篇AngularJs点击状态值改变背景色的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html未点击背景 点击背景,在AngularJs中点击状态如何改变背景色
weixin_39734048的博客
06-21 134
下面我就为大家分享一篇AngularJs点击状态值改变背景色的实例，具有很好的参考价值，希望对大家有所帮助。实例如下：//更改边框颜色的代码 $("#shname").css({"border":"1px solid red"});//排序有时候下标会错乱 不建议使用 建议使用讲师排序代码*{margin: 0 auto;padding: 0;}.p{margin-top: 50px;wid...
angularjs 表格隔行变色和滑过行改变背景颜色
changten的博客
11-23 2944
.option:hover { background: yellow; color: white; } table tbody tr:nth-child(2n) { background-color: saddlebrown; }
Angularjs 点击文字改变背景色
Easy_Easy_Easy的博客
08-30 2236
效果图： 作者：Easy 链接：https://zhuanlan.zhihu.com/p/22233323css 样式.selected{ background-color:#C6E2FF; }html 列表是遍历出来的<li class="text-c" style="margin:10px;" ng-repeat="item in dataList |filter:n
如何在angularjs里面选择一个按钮而不改变其他按钮的颜色
weixin_30379911的博客
04-04 153
var selectJson = { "background-color": "#FF0000", /* Green */ "border": "none", "color": "white", "padding": "15px 32px", "text-align": "center", "text-decoration": "none...
AngularJS ng-model 指令
12-14
例如，当输入框无效时，可以使用以下 CSS 来改变背景颜色： ```css input.ng-invalid { background-color: lightblue; } ``` 输入框对应的 `ng-model` 如果处于 `ng-invalid` 状态，上述 CSS 规则就会生效。 总...
AngularJS实现表单验证功能
01-19
4.ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error) 5.ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类 css内容： /*angularJS会根据表单的状态进行添加或者删除对应的样式*/ /*...
AngularJS 模型详细介绍及实例代码
10-21
这样，当输入不符合规则时，输入框的背景色会变为浅蓝色。 总的来说，AngularJS模型通过`ng-model`指令实现了数据绑定和验证，简化了前端开发，使应用能够实时响应用户交互。理解并熟练运用模型是掌握AngularJS的...
AngularJS点击添加样式、点击变色设置
热门推荐
xyphf的博客
11-14 1万+
首先解释需求是这样的，有个列表，当你点击哪一行时，哪一行背景变成灰色，在JQ中，大家都知道，这是非常容易的，加一个addClass就行了，那么AngularJS如何实现呢？下面我们看代码部分<!doctype html> <html ng-app="a2_11"> <head> <title>添加元素样式</title> <script src="../Script/angular.
AngularJS点击添加样式、点击变色设置的实例代码
10-19
本篇文章主要介绍了AngularJS点击添加样式、点击变色设置的实例代码，具有一定的参考价值，有兴趣的可以了解一下
AngularJS_ng-repeat改变某个的背景颜色
fengsuiyingdong的专栏
05-21 3232
一、功能类似如下描述 如图所示，上面的5个块，用ng-repeat循环输出，怎样实现当点击某一块（如块2）时，该块的背景颜色变为红色？其他的块的颜色不变。 实现方法： html Code {{tableType.name}}
AngularJS 实现当元素为ng-disabled改变背景颜色
你好邱林和的专栏
04-06 2419
如题，AngularJS可以给元素设置disabled属性，当为true时，为不可点击，但实际运行时，不能点击，并没有明显的区别，会产生误解，所以需要元素为不可点击时候，就要设置区分的背景颜色，主要是使用ng-class属性，可以根据是否是disabled来决定加载哪个class样式，参考网址：http://www.cnblogs.com/whitewolf/archive/2013/05/22/
angular [ng-class和ng-model]配对使用，切换背景颜色
且听风吟
11-23 6090
慢慢开始研究下js相关的一些框架，比如说angular.js.第一个学习的是ng-class实现切换背景颜色，代码如下： ng-class类选择 .lightblue{width: 200px;height: 300px;background-color: lightblue;} .red{width: 200px;height: 300px;background-col
AngularJS—通过输入的值来改变样式
生如夏花 炫至茶靡
12-10 3695
先看一下效果： 本次例子实现的是让输入框底下的div，根据用户输入的值来改变颜色。 先看html代码： angular通过输入的值来改变样式 你想要的颜色是： {{mystyle}} 这个例子的要点是通过 class="{{mystyle}}" 将input的输入值赋给class属性，从而实现改变样式的效果。首先我们得先定
Angular中nz-select实现两个选择框互相关联
m0_51935008的博客
01-25 2500
两个选择框 一个是版本名称 一个是版本号 每一个版本都对应一个版本号,当选择其中任意一个时,另外一个都会发生变化.
AngularJS 设置元素样式
soindy
05-10 4203
AngularJS 设置元素样式,代码如下:<div class="panel-body" ng-style="{display: '{{date.display}}'}"> <div ng-style="{height: '{{data.height}}px'}"></div> </div>
angularjs tab样式按钮切换 背景切换 默认选中第一个 选中背景不同
最新发布
05-25
在CSS中，你可以添加一个.active类来定义选中的背景颜色： ```css .tab button { background-color: #fff; border: none; padding: 10px; margin-right: 10px; cursor: pointer; } .tab button.active { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值