AngularJs讲师代码点击状态值改变背景色
来源：互联网 发布：吸烟有害健康烟盒 知乎 编辑：程序博客网 时间：2024/06/05 02:32
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.btn {
background: blue;
border: 0px;
border-radius: 3px;
}
.true {
background: greenyellow;
border: 0px;
border-radius: 3px;
}
.false {
background: yellow;
border: 0px;
border-radius: 3px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<!--
界面
-->
<div class="top">
<input type="button" value="新增订单" ng-click="add()" class="btn" />
<input type="button" value="批量删除" class="btn" ng-click="piliang1()" />
<input type="search" placeholder="按商品名称查询" class="name_s" ng-keydown="gname_cha($event)" ng-model="gname">
<input type="search" placeholder="按手机号查询" class="tel_s" ng-keydown="tel_cha($event)" ng-model="tel">
<select ng-change="isFaHuo()" ng-model="fahuo" ng-init="fahuo='--按状态查询--'">
<option >--按状态查询--</option>
<option >已发货</option>
<option >未发货</option>
</select>
</div>
<table border="1px" cellspacing="0px" cellpadding="0px" class="table">
<tr>
<td><input type="checkbox" class="cb_top" /></td>
<td>id<input type="button" value="排序" class="btn" ng-click="id_paixu()" /></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<input type="button" value="排序" class="btn" ng-click="jiage_paixu()" /></td>
<td>城市</td>
<td>下单时间<input type="button" value="排序" class="btn" ng-click="shijian_paixu()" /></td>
<td>状态</td>
</tr>
<tr ng-repeat="g in goods">
<td><input type="checkbox" class="cb_good" ng-click = "change2($index)"/></td>
<td>{{g.id}}</td>
<td>{{g.gname}}</td>
<td>{{g.user}}</td>
<td>{{g.tel}}</td>
<td>{{g.price|currency:"￥："}}</td>
<td>{{g.city}}</td>
<td>{{g.time|date:"yyyy-MM-dd HH:mm:ss"}}</td>
<td><input type="button" value="{{g.state|myFilter}}" class="{{g.state}}" ng-click="fahuo1($index)" /></td>
</tr>
</table>
<!--
下部
-->
<div class="bottom" ng-show = "show">
<input type="button" value="添加商品信息" />
<fieldset>
<legend>添加订单信息</legend>
商品名:<input type="text" class="add_gname" ng-model="gname12" ng-init="name12='oppo'"/><span class="gname_tip"></span><br> 用户名:
<input type="text" class="add_user" ng-model="user12"/><span></span><br> 手机号:
<input type="text" class="add_tel" ng-model="tel12"/><span></span><br> 价格为:
<input type="text" class="add_price" ng-model="price12"/><span></span><br>
<select ng-model="city12" ng-init="city12='--请选择城市--'" class="add_city">
<option>--请选择城市--</option>
<option>北京</option>
<option>云南</option>
<option>成都</option>
</select>
<button ng-click="add2()">保存</button>
</fieldset>
</div>
<script type="text/javascript">
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope) {
//初始数据
var arr = [{
"id": 2001,
"isChecked": false,
"gname": "iphoneX",
"user": "张三",
"tel": 12345678998,
"price": 8699.00,
"city": "北京",
"time": new Date(167808).getTime(),
"state": false
}, {
"id": 3006,
"isChecked": false,
"gname": "iphone6",
"user": "lisi",
"tel": 132898765765,
"price": 5638.00,
"city": "郑州",
"time": new Date(1688888).getTime(),
"state": false
}, {
"id": 5312,
"isChecked": false,
"gname": "iphone7",
"user": "赵小龙",
"tel": 15072656676,
"price": 6180.00,
"city": "北京",
"time": new Date(21312312).getTime(),
"state": false
}, {
"id": 2132,
"isChecked": false,
"gname": "iphone8",
"user": "赵强",
"tel": 186765446788,
"price": 7190.00,
"city": "上海",
"time": new Date(543534534534).getTime(),
"state": false
}];
//初始haul界面
$scope.goods = arr;
//发货
$scope.fahuo1 = function($index) {
arr[$index].state = true;
}
//根据名字查询
$scope.gname_cha = function($event) {
var arr_temp = []; //定义临时数组
var keyCode = $event.keyCode;
if (keyCode == 13) {
//遍历数组查询
for (var i = 0; i < arr.length; i++) {
if (arr[i].gname.indexOf($scope.gname) != -1) {
arr_temp.push(arr[i]);
}
}
//赋值
$scope.goods = arr_temp;
}
}
//根据手机号查询
$scope.tel_cha = function($event) {
var arr_temp = []; //定义临时数组
var keyCode = $event.keyCode;
if (keyCode == 13) {
//遍历数组查询
for (var i = 0; i < arr.length; i++) {
var t = arr[i].tel.toString();
if (t.indexOf($scope.tel) != -1) {
arr_temp.push(arr[i]);
}
}
//赋值
$scope.goods = arr_temp;
}
}
//筛选发货/未发货
$scope.isFaHuo = function() {
//定义一个临时数组，储存对象
var arr_temp = [];
//获取select里面的值
var f = $scope.fahuo;
if (f == "已发货") {
for (var i = 0; i < arr.length; i++) {
var f1 = arr[i].state; //获取发货状态
if (f1) {
arr_temp.push(arr[i]);
}
}
} else {
for (var i = 0; i < arr.length; i++) {
var f1 = arr[i].state; //获取发货状态
if (f1 == false) {
arr_temp.push(arr[i]);
}
}
}
//赋值
//goods 自负责显示 MVVM
//arr 负责数据
//临时arr_temp 临时储存结果
$scope.goods = arr_temp;
}
//根据id排序
var id_flag = true;
$scope.id_paixu = function() {
if (id_flag) {
arr.sort(function(a, b) {
return a.id - b.id;
});
} else {
arr.sort(function(a, b) {
return b.id - a.id;
});
}
id_flag = !id_flag;
$scope.goods = arr;
}
//根据价格排序
var price_flag = true;
$scope.jiage_paixu = function(){
if (price_flag) {
arr.sort(function(a, b) {
return a.price - b.price;
});
} else {
arr.sort(function(a, b) {
return b.price - a.price;
});
}
price_flag = !price_flag;
$scope.goods = arr;
}
//批量删除
$scope.piliang1 = function(){
//遍历数组，如果isCheck = true,而且state = true;删除，否则不删除
for (var i = arr.length-1;i>=0;i--) {
var g = arr[i];
var c = g.isChecked;
var s = g.state;
console.log(c+"--"+s)
if (c&&s) {
arr.splice(i,1);
}
}
$scope.goods=arr;
}
//点击复选框，改变选中状态
$scope.change2 = function($index){
arr[$index].isChecked = !arr[$index].isChecked;
$scope.goods=arr;
}
//点击新增，下面显示
$scope.add = function(){
$scope.show = true;
}
//定义一个方法，随机数
function suiji(){
var m = Math.random()*10000;
return m;
}
//保存
$scope.add2 = function(){
//取值
var name12 = $(".add_gname").val();
var user12 = $(".add_user").val();
var tel12 = $(".add_tel").val();
var price12 = $(".add_price").val();
var city12 = $(".add_city").val();
//判断是否为空
if(name12==""){
//边框变红
//span显示文字
$(".add_gname").css({"border":"1px solid red"})
$(".gname_tip").text("用户名不能为空");
return;
}
//创建对象
var g = {
"id": suiji(),
"isChecked": false,
"gname": name12,
"user": user12,
"tel": tel12,
"price": price12,
"city": city12,
"time": new Date().getTime(),"state": false
};
//添加
arr.push(g);
$scope.goods = arr;
//隐藏
$scope.show = false;
}
})
//自定义过滤器，根据state的状态，返回不同的值
mo.filter("myFilter", function() {
return function(input) {
if (input) {
return "已发货";
} else {
return "未发货";
}
return input;
}
})
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.btn {
background: blue;
border: 0px;
border-radius: 3px;
}
.true {
background: greenyellow;
border: 0px;
border-radius: 3px;
}
.false {
background: yellow;
border: 0px;
border-radius: 3px;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<!--
界面
-->
<div class="top">
<input type="button" value="新增订单" ng-click="add()" class="btn" />
<input type="button" value="批量删除" class="btn" ng-click="piliang1()" />
<input type="search" placeholder="按商品名称查询" class="name_s" ng-keydown="gname_cha($event)" ng-model="gname">
<input type="search" placeholder="按手机号查询" class="tel_s" ng-keydown="tel_cha($event)" ng-model="tel">
<select ng-change="isFaHuo()" ng-model="fahuo" ng-init="fahuo='--按状态查询--'">
<option >--按状态查询--</option>
<option >已发货</option>
<option >未发货</option>
</select>
</div>
<table border="1px" cellspacing="0px" cellpadding="0px" class="table">
<tr>
<td><input type="checkbox" class="cb_top" /></td>
<td>id<input type="button" value="排序" class="btn" ng-click="id_paixu()" /></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<input type="button" value="排序" class="btn" ng-click="jiage_paixu()" /></td>
<td>城市</td>
<td>下单时间<input type="button" value="排序" class="btn" ng-click="shijian_paixu()" /></td>
<td>状态</td>
</tr>
<tr ng-repeat="g in goods">
<td><input type="checkbox" class="cb_good" ng-click = "change2($index)"/></td>
<td>{{g.id}}</td>
<td>{{g.gname}}</td>
<td>{{g.user}}</td>
<td>{{g.tel}}</td>
<td>{{g.price|currency:"￥："}}</td>
<td>{{g.city}}</td>
<td>{{g.time|date:"yyyy-MM-dd HH:mm:ss"}}</td>
<td><input type="button" value="{{g.state|myFilter}}" class="{{g.state}}" ng-click="fahuo1($index)" /></td>
</tr>
</table>
<!--
下部
-->
<div class="bottom" ng-show = "show">
<input type="button" value="添加商品信息" />
<fieldset>
<legend>添加订单信息</legend>
商品名:<input type="text" class="add_gname" ng-model="gname12" ng-init="name12='oppo'"/><span class="gname_tip"></span><br> 用户名:
<input type="text" class="add_user" ng-model="user12"/><span></span><br> 手机号:
<input type="text" class="add_tel" ng-model="tel12"/><span></span><br> 价格为:
<input type="text" class="add_price" ng-model="price12"/><span></span><br>
<select ng-model="city12" ng-init="city12='--请选择城市--'" class="add_city">
<option>--请选择城市--</option>
<option>北京</option>
<option>云南</option>
<option>成都</option>
</select>
<button ng-click="add2()">保存</button>
</fieldset>
</div>
<script type="text/javascript">
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope) {
//初始数据
var arr = [{
"id": 2001,
"isChecked": false,
"gname": "iphoneX",
"user": "张三",
"tel": 12345678998,
"price": 8699.00,
"city": "北京",
"time": new Date(167808).getTime(),
"state": false
}, {
"id": 3006,
"isChecked": false,
"gname": "iphone6",
"user": "lisi",
"tel": 132898765765,
"price": 5638.00,
"city": "郑州",
"time": new Date(1688888).getTime(),
"state": false
}, {
"id": 5312,
"isChecked": false,
"gname": "iphone7",
"user": "赵小龙",
"tel": 15072656676,
"price": 6180.00,
"city": "北京",
"time": new Date(21312312).getTime(),
"state": false
}, {
"id": 2132,
"isChecked": false,
"gname": "iphone8",
"user": "赵强",
"tel": 186765446788,
"price": 7190.00,
"city": "上海",
"time": new Date(543534534534).getTime(),
"state": false
}];
//初始haul界面
$scope.goods = arr;
//发货
$scope.fahuo1 = function($index) {
arr[$index].state = true;
}
//根据名字查询
$scope.gname_cha = function($event) {
var arr_temp = []; //定义临时数组
var keyCode = $event.keyCode;
if (keyCode == 13) {
//遍历数组查询
for (var i = 0; i < arr.length; i++) {
if (arr[i].gname.indexOf($scope.gname) != -1) {
arr_temp.push(arr[i]);
}
}
//赋值
$scope.goods = arr_temp;
}
}
//根据手机号查询
$scope.tel_cha = function($event) {
var arr_temp = []; //定义临时数组
var keyCode = $event.keyCode;
if (keyCode == 13) {
//遍历数组查询
for (var i = 0; i < arr.length; i++) {
var t = arr[i].tel.toString();
if (t.indexOf($scope.tel) != -1) {
arr_temp.push(arr[i]);
}
}
//赋值
$scope.goods = arr_temp;
}
}
//筛选发货/未发货
$scope.isFaHuo = function() {
//定义一个临时数组，储存对象
var arr_temp = [];
//获取select里面的值
var f = $scope.fahuo;
if (f == "已发货") {
for (var i = 0; i < arr.length; i++) {
var f1 = arr[i].state; //获取发货状态
if (f1) {
arr_temp.push(arr[i]);
}
}
} else {
for (var i = 0; i < arr.length; i++) {
var f1 = arr[i].state; //获取发货状态
if (f1 == false) {
arr_temp.push(arr[i]);
}
}
}
//赋值
//goods 自负责显示 MVVM
//arr 负责数据
//临时arr_temp 临时储存结果
$scope.goods = arr_temp;
}
//根据id排序
var id_flag = true;
$scope.id_paixu = function() {
if (id_flag) {
arr.sort(function(a, b) {
return a.id - b.id;
});
} else {
arr.sort(function(a, b) {
return b.id - a.id;
});
}
id_flag = !id_flag;
$scope.goods = arr;
}
//根据价格排序
var price_flag = true;
$scope.jiage_paixu = function(){
if (price_flag) {
arr.sort(function(a, b) {
return a.price - b.price;
});
} else {
arr.sort(function(a, b) {
return b.price - a.price;
});
}
price_flag = !price_flag;
$scope.goods = arr;
}
//批量删除
$scope.piliang1 = function(){
//遍历数组，如果isCheck = true,而且state = true;删除，否则不删除
for (var i = arr.length-1;i>=0;i--) {
var g = arr[i];
var c = g.isChecked;
var s = g.state;
console.log(c+"--"+s)
if (c&&s) {
arr.splice(i,1);
}
}
$scope.goods=arr;
}
//点击复选框，改变选中状态
$scope.change2 = function($index){
arr[$index].isChecked = !arr[$index].isChecked;
$scope.goods=arr;
}
//点击新增，下面显示
$scope.add = function(){
$scope.show = true;
}
//定义一个方法，随机数
function suiji(){
var m = Math.random()*10000;
return m;
}
//保存
$scope.add2 = function(){
//取值
var name12 = $(".add_gname").val();
var user12 = $(".add_user").val();
var tel12 = $(".add_tel").val();
var price12 = $(".add_price").val();
var city12 = $(".add_city").val();
//判断是否为空
if(name12==""){
//边框变红
//span显示文字
$(".add_gname").css({"border":"1px solid red"})
$(".gname_tip").text("用户名不能为空");
return;
}
//创建对象
var g = {
"id": suiji(),
"isChecked": false,
"gname": name12,
"user": user12,
"tel": tel12,
"price": price12,
"city": city12,
"time": new Date().getTime(),"state": false
};
//添加
arr.push(g);
$scope.goods = arr;
//隐藏
$scope.show = false;
}
})
//自定义过滤器，根据state的状态，返回不同的值
mo.filter("myFilter", function() {
return function(input) {
if (input) {
return "已发货";
} else {
return "未发货";
}
return input;
}
})
</script>
</body>
</html>
阅读全文
0 0
- AngularJs讲师代码点击状态值改变背景色
- AngularJs点击状态值改变背景色
- Angularjs 点击文字改变背景色
- 点击单元格改变背景色
- 点击按钮改变背景色
- 事件：点击按钮，改变背景色
- 点击文本区域背景色改变
- iOS 按钮点击改变背景色
- ul-li 点击改变背景色
- 解决: 用代码改变listview的item背景色时，点击一个item,每隔几个item背景色重复
- 让编辑状态下的UITableViewCell响应点击事件时，不改变背景色
- 让编辑状态下的UITableViewCell响应点击事件时，不改变背景色
- 不通的页面，点击导航改变背景色--(代码优化后)
- 用jquery实现点击栏目背景色改变
- 点击listview的时候listitem不改变背景色
- Jquery实现点击切换单元格改变背景色
- LiseView GirdView点击改变背景图片或者背景色
- eui.Button改变文本、背景色及是否可点击
- 求最大公约数（辗转相除法）
- 【Angular】变量、常量声明与解构
- 150. Evaluate Reverse Polish Notation
- 进程间的通讯方式_共享内存
- Android面试篇之View和ViewGroup的关系
- AngularJs讲师代码点击状态值改变背景色
- Mysql主从复制实战
- Java线程池的使用
- 习题7 5-7题
- 从底部弹出框
- Assert关键字
- 微信小程序swiper如何获得当前页面的index
- Linux下MySQL5.6的修改字符集编码为UTF8（解决中文乱码问题，亲测可用！）
- EA&UML日拱一卒-多任务编程超入门-（14）麻雀虽小，五脏俱全
