var selectJson = {
"background-color": "#FF0000", /* Green */
"border": "none",
"color": "white",
"padding": "15px 32px",
"text-align": "center",
"text-decoration": "none",
"display": "inline-block",
"font-size": "16px",
"margin": "4px 2px",
"cursor": "pointer"
}; var unselectJson = {
"background-color": "#E5E5E5", /* Green */
"border": "none",
"color": "black",
"padding": "15px 32px",
"text-align": "center",
"text-decoration": "none",
"display": "inline-block",
"font-size": "16px",
"margin": "4px 2px",
"cursor": "pointer"
}; var myApp1 = angular.module('myApp1', []);
myApp1.controller('myCtrl', function ($scope) {
$scope.select = false;
$scope.nameStyle = unselectJson; $scope.click = function (x) {
$scope.select = !$scope.select;
if ($scope.select) {
betPush(x);
$scope.nameStyle = selectJson;
}
else {
$scope.nameStyle = unselectJson;
}
};
}); var myValueApp = angular.module('myValueApp', []);
myValueApp.controller('valueCtrl', function ($scope) {
$scope.valueGroup=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
$scope.select = false;
$scope.contents = [
unselectJson, unselectJson, unselectJson, unselectJson, unselectJson, unselectJson, unselectJson, unselectJson,
unselectJson, unselectJson, unselectJson, unselectJson, unselectJson, unselectJson, unselectJson, unselectJson
]
$scope.clickValue = function (x) {
$scope.select = !$scope.select;
let index = x - 1; console.log(x); if ($scope.select) {
$scope.contents[index] = selectJson;
betPush(x);
}
else {
$scope.contents[index] = unselectJson;
}
};
}); angular.module('myApp', ['myApp1', 'myValueApp']); var m_arrBet = new Array();
function betPush(name) {
m_arrBet.push(name);
console.log(m_arrBet);
}

html

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="angular.min.js"></script>
<script src="value.js"></script> </head>
<body ng-app="myApp"> <div ng-init="names=['举例']" ng-controller="myCtrl" >
<button ng-style="nameStyle" ng-click="click(x)" ng-repeat="x in names">{{x}}</button>
</div> <br />
<br />
<br />
<div ng-controller="valueCtrl" >
<button ng-model="x" ng-style="contents[$index]" id="btn{{$index}}" ng-click="clickValue(x)" ng-repeat="x in valueGroup">{{x}}</button>
</div> </body> </html>

如何在angularjs里面选择一个按钮而不改变其他按钮的颜色的更多相关文章

  1. 如何在Java生态圈选择一个轻量级的RESTful框架?

    在微服务流行的今天,我们会从纵向和横向分解代码的逻辑,将一些独立的无状态的代码单元实现为微服务,可以将它们发布到一些分布式计算单元或者Docker中,并在性能需要的时候及时地创建更多的服务单元.微服务 ...

  2. 从一个ISP移至另一个ISP而不改变IP的方案

    某客户从一个ISP_A移到了另一个ISP_B.但是,其WEB服务器由于之前对外公布的是IP地址,且无DNS,因此,要求该服务器搬至ISP_B后,用户依然可以访问原来的IP地址,求方案. 假设:ISP_ ...

  3. 跟我学AngularJs:AngularJs入门及第一个实例

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...

  4. Maven:如何在eclipse里新建一个Maven的java项目和web项目

    如何在eclipse里新建一个Maven的java项目和web项目: 一:java项目 New-->Other-->Maven 右击项目-->properties,修改以下文件: ① ...

  5. PS网页设计教程XXVI——如何在PS中创建一个专业的网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  6. 如何在magento后台增加一个自定义订单状态

    magento后台订单状态(order status)只有Pending.Processing.On Hold.Closed.Canceled.Pending Payment 等等,如何在magent ...

  7. Angularjs,WebAPI 搭建一个简易权限管理系统

    Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一)   1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 Web ...

  8. 如何在linux下制作一个windows的可启动u盘?

    如何在linux下制作一个windows的可启动u盘? 情景是这样的,有一个windows10的iso,现在想通过U盘安装,要求即支持UEFI(启动引导器),又支持Legacy(启动引导器),因为有一 ...

  9. (办公)重新选择一个开发工具Eclipse

    文章Eclipse内容摘抄自w3cschool的eclipse,原文地址:https://www.w3cschool.cn/eclipse/eclipse-run-configuration.html ...

随机推荐

  1. 在maven中classpath notfund

  2. 10.18号java课后作业代码

    import java.util.*; public class T { public static int a=0; public T() { a++; System.out.println(&qu ...

  3. windows环境安装zabbix客户端

    安装windows版zabbix客户端 一.下载客户端 在数据盘新建一个zabbix_agent目录 浏览器打开 https://www.zabbix.com/download_agents 选择”z ...

  4. CSS Media Query

    [CSS Media Query] CSS Media Queries are a feature in CSS3 which allows you to specify when certain C ...

  5. The CHAR and VARCHAR Types

    [The CHAR and VARCHAR Types] The CHAR and VARCHAR types are declared with a length that indicates th ...

  6. unity中Android环境变量配置

    http://www.cnblogs.com/windytrees/p/7533477.html

  7. nodejs windows安装

    [安装步骤] 一.安装node.js 1.前往node.js官网下载(我下载的是v10.8.0)并安装工具,这里安装路径选到D盘,e:\Program Files\nodejs 安装完毕在命令行输入以 ...

  8. day11 闭包函数和装饰器

    1.函数不是新知识点 主要是学习函数的用法 在面向对象编程中,一切皆对象,函数也不例外 具体的表现 1.函数可以引用 2.函数可以作为函数的参数 3.函数可以作为函数的返回值 4.可以被存储到容器类型 ...

  9. Appium1.6 定位iOS元素和操作元素

    元素定位方式  第一种:通过Appium1.6的Inspector来查看 具体安装方式前面的随笔已经介绍了:http://www.cnblogs.com/meitian/p/7360017.html ...

  10. 用两个栈实现队列(python)

    题目描述 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. # -*- coding:utf-8 -*- class Solution: def __init__( ...