编程 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 相关文章推荐

用JS实现的一个include函数

Jul 21 Javascript

jQuery checkbox全选/取消全选实现代码

Nov 14 Javascript

jquery 插件学习（二）

Aug 06 Javascript

浅析JavaScript中的隐式类型转换

Dec 05 Javascript

javascript中cookie对象用法实例分析

Jan 30 Javascript

js实现图片上传并正常显示

Dec 19 Javascript

Js的Array数组对象详解

Feb 22 Javascript

BootStrap下拉框在firefox浏览器界面不友好的解决方案

Aug 18 Javascript

js创建对象几种方式的优缺点对比

Sep 28 Javascript

基于node.js express mvc轻量级框架实践

Sep 14 Javascript

VUE 3D轮播图封装实现方法

Jul 03 Javascript

微信小程序绘制图片发送朋友圈

Jul 25 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