实例如下：
//更改边框颜色的代码 $(\"#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点击状态值改变背景色的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容