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. js 乘法 4.39*100 出现值不对问题解决

    https://www.jianshu.com/p/a026245661bb //除法函数,用来得到精确的除法结果 //说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显. ...

  2. node-rsa

    [node-rsa] 引用 var NodeRSA = require('node-rsa') 生成一个私钥长度为512的key(同时生成公钥) var key = new NodeRSA({b: 5 ...

  3. Android 添加网络权限

    [Android 添加网络权限] <uses-permission Android:name="android.permission.INTERNET"></us ...

  4. 更新linux下python版本

    # 安装所有的开发工具包 yum groupinstall -y "Development tools" # 安装其它的必需包 yum install -y zlib-devel ...

  5. hibernate ORA-17059 无法转换为内部表示

    参考 https://jingyan.baidu.com/article/2fb0ba40a25a2b00f2ec5fc7.html 数据库里的字段类型与Java实体类中的对应字段属性类型不匹配

  6. layer数据表格换行

    在使用layer数据表格的时候,默认是不可以换行的.这样显示 改动后 数据格式为   aa<br>bb就会显示为换行 比如我们的字符串是    a<br>b 这样的字符串浏览器 ...

  7. e-olymp Problem4196 Chocolate bars

    吐槽一下,这个OJ的题目真的是阅读理解题.代码非常短,就是题目难理解.心累. 传送门:点我 Chocolate bars It is hard to overestimate the role of ...

  8. ActiveMQ之java Api

    ActiveMQ 安全机制 activemq的web管理界面:http://127.0.0.1:8161/admin activemq管控台使用jetty部署,所以需要修改密码则需要修改相应的配置文件 ...

  9. c#: PointToClient与PointToScreen

    起因: 很早就见过这两个方法,却未曾深入研究,偶尔一用,却纠结于其转换方法,遂写Demo以求验证,记录认知以做备忘. 其为Control类的内置方法,原型为: // // 摘要: // 将指定屏幕点的 ...

  10. 【centos】centos安装g++

    gcc在Centos下的安装:使用的是以下语句:yum install gcc 以为安装g++,类似的应该使用:yum install g++ 可是提示:command is not found 查询 ...