编程 Javascript

AngularJs点击状态值改变背景色的实例

Posted in Javascript onDecember 18, 2017

实例如下：

//更改边框颜色的代码  $("#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>状态</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>

以上这篇AngularJs点击状态值改变背景色的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

- Author -

王zhiqiang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基础的prototype.js常用函数及其用法

Mar 10 Javascript

JS request函数用来获取url参数

May 17 Javascript

jsvascript图像处理—(计算机视觉应用)图像金字塔

Jan 15 Javascript

jquery按回车提交数据的代码示例

Nov 05 Javascript

javascript事件模型实例分析

Jan 30 Javascript

AngularJS 过滤器（自带和自建）详解

Sep 19 Javascript

基于jQuery实现表格的排序

Dec 02 Javascript

JS实现根据密码长度显示安全条功能

Mar 08 Javascript

p5.js入门教程之键盘交互

Mar 19 Javascript

Promise.all中对于reject的处理方法

Aug 01 Javascript

Vue 路由切换时页面内容没有重新加载的解决方法

Sep 01 Javascript

Vue中的vue-resource示例详解

Nov 02 Javascript

jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例

Dec 18 #jQuery

JS实现点击复选框变更DIV显示状态的示例代码

Dec 18 #Javascript

Vue下的国际化处理方法

Dec 18 #Javascript

webpack多页面开发实践

Dec 18 #Javascript

Vue侧滑菜单组件——DrawerLayout

Dec 18 #Javascript

switchery按钮的使用方法

Dec 18 #Javascript

three.js实现3D影院的原理的代码分析

Dec 18 #Javascript