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

基于mootools插件实现遮罩层新手引导

May 24 Javascript

jQuery学习笔记更改jQuery对象

Sep 19 Javascript

jquery的ajax()函数传值中文乱码解决方法介绍

Nov 08 Javascript

jquery实现带复选框的表格行选中删除时高亮显示

Aug 01 Javascript

js正则表达式中exec用法实例

Jul 23 Javascript

图文详解Heap Sort堆排序算法及JavaScript的代码实现

May 04 Javascript

清除js缓存的多种方法总结

Dec 09 Javascript

一个有意思的鼠标点击文字特效jquery代码

Sep 23 jQuery

原生JavaScrpit中异步请求Ajax实现方法

Nov 03 Javascript

vue项目持久化存储数据的实现代码

Oct 01 Javascript

vue实现淘宝购物车功能

Apr 20 Javascript

JavaScript字符串转数字的简单实现方法

Nov 27 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