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. tkinter绑定鼠标滚轮滚动事件 canvas.bind("<MouseWheel>", processWheel) 失效

    其实,不同系统不一样,我的是Ubuntu 所以是<Button-4>   <Button-5> 见下: 来自:https://stackoverflow.com/questio ...

  2. svn转git

    在Git Bash 中输入 git-svn clone http://devsvnread.uuzuonline.net/GOT_PRIVATE/server/ --no-metadata -T tr ...

  3. 2018面向对象程序设计（Java）第7周学习指导及要求

    第7周学习指导及要求(2018.10.11-2018.10.14)   学习目标 深入理解OO程序设计的特征:继承.多态: 熟练掌握Java语言中基于类.继承技术构造程序的语法知识: 利用继承定义类设 ...

  4. linux下各权限的细分

    PS:有时候你发现用root权限都不能修改某个文件,大部分原因是曾经用chattr命令锁定该文件了.chattr命令的作用很大,其中一些功能是由Linux内核版本来支持的,不过现在生产绝大部分跑的li ...

  5. 使用Java实现对一个数组的增删改查以及初始化

    import java.util.*; import java.lang.*; public class Array { private int[] data;// 数组 private int si ...

  6. Choosing the Type at Runtime

    [Choosing the Type at Runtime] You cannot use a general expression as the React element type. If you ...

  7. IDEA2017-破解方法

    @方法一 第一步:下载jar 包 地址:https://github.com/locationbai/registerIDEA_2017.3.2_jar 第二部:将下载好的jar放在idea安装目录下 ...

  8. 新版本PHP使用更方便了

    $hostname_conn = "";$database_conn = "";$username_conn = "root";$passw ...

  9. 进程实时监控pidstat命令详解

    pidstat主要用于监控全部或指定进程占用系统资源的情况,如CPU,内存.设备IO.任务切换.线程等.pidstat首次运行时显示自系统启动开始的各项统计信息,之后运行pidstat将显示自上次运行 ...

  10. TOJ4757: 12345（数学）

    传送门 时间限制(普通/Java):1000MS/3000MS     内存限制:65536KByte 描述 为了说明水题也不是那么好AC的,FD出了一个由数字1~5组成的题目,题意如下: 给定一个正 ...