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. 最小生成树二·Kruscal算法

    描述 随着小Hi拥有城市数目的增加,在之间所使用的Prim算法已经无法继续使用了——但是幸运的是,经过计算机的分析,小Hi已经筛选出了一些比较适合建造道路的路线,这个数量并没有特别的大. 所以问题变成 ...

  2. 签名Cookie

    [签名Cookie] set-cookie时加上防篡改验证码. 如: user_name=alex|bj95ef23cc6daecc475de   防篡改验证码的生成规则可以很简单:md5(cooki ...

  3. linux shell 学习笔记01

    1.命令历史记录history !$     :调用上一条命令的执行结果 !100   :运行history记录里的第100条命令 !ser   :调用以ser开头的最后一次执行的命令 ctrl+r  ...

  4. Java 几种锁

    自旋锁 自旋锁顾名思义,它会等待一定时间(自旋),在这期中会什么都不做就是等资源被释放,好处在于没有了内核态用户态切换的效率损失,但是如果它一直不能访问到资源的话就会一直占用cpu资源,所以它会循环一 ...

  5. StringBuffer类和String类(原文地址 : http://www.cnblogs.com/springcsc/archive/2009/12/03/1616330.html)

    StringBuffer类和String一样,也用来代表字符串,只是由于StringBuffer的内部实现方式和String不同,所以StringBuffer在进行字符串处理时,不生成新的对象,在内存 ...

  6. ansible1

    前期工作: 第一步:下载epel源 wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo 第二步: ...

  7. PHP抽象方法、抽象类以及接口

     1.什么是抽象方法?    我们在类里面定义的没有方法提的方法就是抽象方法.所谓的没有方法体指的是,在声明的时候没有大括号以及其中的内容,而是直接在声明时在方法名后加上分号结束,另外在声明抽象方法时 ...

  8. word 2016 加载 mathtype

    1.加载wold: 首先打开word,选择选项-------加载项------管理(A),选择word加载项,点击转到 这儿显示的是我已经添加过的所以显示的有. 2.点击添加,找到你的mathtype ...

  9. 在CentOS7.4上手动编译安装Mysql-5.7.20

    实验环境:CentOS 7.4 mysql软件: mysql-boost-5.7.20.tar.gz 1.安装编译工具 yum -y install \ncurses \ncurses-devel \ ...

  10. [leetcode]528. Random Pick with Weight按权重挑选索引

    Given an array w of positive integers, where w[i] describes the weight of index i, write a function  ...