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. 本地Navicat连不上Linux虚拟机MySQL数据库问题

    LinuxAndMySQL 版权声明:本文为博主原创文章,未经博主允许不得转载. 在Linux登录到MySQL数据:mysql -uroot -p 输入密码 切换到mysql数据库 mysql> ...

  2. VFS: Cannot open root device "nfs" or unknown-block(0,255)错误的解决

    1. 解决办法:在内核配置时候文件系统中选中Root file system on NFS

  3. kotlin string

    Kotlin String split 操作实践   内容 此文章展示kotlin中对String字符串的split操作,如果你有遇到这方面的需求,希望对你有用. 1. split + 正则 先看下系 ...

  4. gradle 很好用的么

    Gradle 其实是很好用的 2017, Apr 14 by Tesla Ice Zhang Gradle 是一款使用 Kotlin (划掉) Groovy 编写的 JVM 构建工具,其易用性和 Ma ...

  5. FP ABPPMGR表 其它常用存储过程

    SAP_MATERIAL_SO:处理材料订单缺少BOM,ROUTING信息 1. 增加这部分订单的BOM信息         2. 增加这部分订单材料的ROUTING信息         3. 如果是 ...

  6. Java 读取Excel 文件内容

    在一个项目中,有一个需求,是把excel文件的内容转换为xml格式展示.在学习如何操作的过程中,首先是如何获取excel文件,其中操作的代码如下: 1.首先是导入需要的 jar, 下载地址:https ...

  7. serv-U使用

    该软件是设置ftp服务器的 可以百度查询ftp服务器安装攻略,如 https://jingyan.baidu.com/article/cb5d6105c00bba005c2fe0ca.html 问题: ...

  8. Python memoryview() 函数

    Python memoryview() 函数  Python 内置函数 描述 memoryview() 函数返回给定参数的内存查看对象(Momory view). 所谓内存查看对象,是指对支持缓冲区协 ...

  9. Shell教程 之printf命令

    上一章节我们学习了 Shell 的 echo 命令,本章节我们来学习 Shell 的另一个输出命令 printf. printf 命令模仿 C 程序库(library)里的 printf() 程序. ...

  10. 【linux C】C语言中常用的几个函数的总结【二】

    3.fgets 虽然用 gets() 时有空格也可以直接输入,但是 gets() 有一个非常大的缺陷,即它不检查预留存储区是否能够容纳实际输入的数据,换句话说,如果输入的字符数目大于数组的长度,get ...