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. HTTP状态码汇总

  2. linux配置虚拟主机

    linux 下怎么配置虚拟主机 linux 下怎么配置虚拟主机,在网上找到N个资料都是高手们随便说几句,都没怎么说清楚.问题:  我把域名(bs.jxiop.com)指向了 68.10.140.10 ...

  3. Vue 中select option默认选中的处理方法

    在做泰康项目的时候有个需求就是要给select默认选中的样式我的处理方法有两个 1.直接将默认值给  selectedOption <select v-model="selectedO ...

  4. php首字母 大写 数组去重复

    $zimu[]=strtoupper(substr( $value['title'], 0, 1 ));//大写 $zimu[]=strtolower(substr( $value['title'], ...

  5. c# list批量添加 对象 到数据库的sql

    public void AddList(List<ProModule.Model.pro_manifest_item> list) { Hashtable SQLStringList = ...

  6. Hibernate一对多单向关联和双向关联映射方法及其优缺点 （待续）

    一对多关联映射和多对一关联映射实现的基本原理都是一样的,既是在多的一端加入一个外键指向一的一端外键,而主要的区别就是维护端不同.它们的区别在于维护的关系不同: 一对多关联映射是指在加载一的一端数据的同 ...

  7. js保留小数点后面几位的方法

    原文地址: http://www.jb51.net/article/45884.htm 四舍五入以下处理结果会四舍五入: ? 1 2 var num =2.446242342; num = num.t ...

  8. jquery mobil 和页面适应

    <meta name="viewport" content="width=device-width" />

  9. 第三章 列表（a）接口与实现

  10. centos 配置Openssl并创建证书

    具体详情参考:http://wiki.centos.org/HowTos/Https 一.安装软件 yum install mod_ssl openssl 二.创建证书: # Generate pri ...