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点击状态值改变背景色的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript EasyPager 分页函数
May 25 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
详解Vue中watch的高级用法
May 02 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
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
You might like
php错误级别的设置方法
2013/06/17 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
dojo 之基础篇
2007/03/24 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
Three.js快速入门教程
2016/09/09 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
python命令 -u参数用法解析
2019/10/24 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
毕业生动漫设计求职信
2013/10/11 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
中学生检讨书1000字
2014/10/28 职场文书
2014年团支书工作总结
2014/11/14 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
Java无向树分析 实现最小高度树
2022/04/09 Javascript