在ng上应用css动态单击angularjs

我有一个这样的物体

var obj = [
            {
              'id':1,
              'color':'#ff0000',
              'name':'final'
            },
            {
              'id':2,
              'color':'#ffff99',
              'name':'start'
            }
          ];

通过使用此“我正在渲染”单选按钮组：

<div class="btn-group" ng-repeat="item in obj">
 <button type="radio" class="btn-group btn-xs btn-group-xs">{{item.name}}</button>
</div>

{{item.name}

我的问题是：

1。如何在ng上应用背景色属性单击按钮以显示obj中的内容

2。将按钮文本的颜色更改为对比度/相反颜色。（这意味着如果按钮背景颜色为黑色则要将文本颜色更改为白色）

在这里，我尝试了ng类和ng风格，但有些地方我做错了。我不知道它在哪里

---

有人能帮我吗。感谢您可以尝试以下操作：向数组中的元素添加样式属性：

function MyCtrl($scope) {
  $scope.obj = [
      {
          'id':1,
          'color':'#ff0000',
          'name':'final',
          'style' : {
              'background-color' : ''
          }
      },
      {
          'id':2,
          'color':'#ffff99',
          'name':'start',
          'style' : {
              'background-color' : ''
          }
      }
  ];
}

然后，在您看来，您可以执行以下操作：

<div ng-app="">
    <div ng-controller="MyCtrl">
        <div class="btn-group" ng-repeat="item in obj">
            <button data-ng-click="item.style = {'background' : item.color}" data-ng-style="item.style" type="radio" class="btn-group btn-xs btn-group-xs">{{item.name}
            </button>
        </div>
    </div>
</div> 

{{item.name}

我希望有帮助

编辑：在Javascript中，您可以在运行时通过以下简单循环向abject添加属性：

for(var i=0; i<$scope.obj.length; i++){
    $scope.obj[i].style = {
        'background-color' : ''
    }
}

---

for（var i=0；i使用此函数反转十六进制颜色

（来源：）

并将其附加到$scope，以便在视图中可用：

$scope.invertColor = function (hexTripletColor) {
    var color = hexTripletColor;
    color = color.substring(1);           // remove #
    color = parseInt(color, 16);          // convert to integer
    color = 0xFFFFFF ^ color;             // invert three bytes
    color = color.toString(16);           // convert to hex
    color = ("000000" + color).slice(-6); // pad with leading zeros
    color = "#" + color;                  // prepend #
    return color;
}

然后使用
ng样式
设置每个项目的
背景
和
颜色
：

ng style=“{background:item.color，'color'：invertColor（item.color）}”

请参见此处的工作示例：
我正在使用一点Jonathan解决方案，以使一切工作正常。请参见此处：

在显示相反颜色方面，根据我的经验，在任何背景颜色上，白色/黑色文本都能达到最佳可读性。我花了一些时间研究这个，这就是我想到的

$scope.RGB = function(colour) {
    if (colour.charAt(0) == "#") {
      colour = colour.substr(1, 6)
    }
    colour = colour.replace(/ /g, "");
    colour = colour.toLowerCase();
    var colour_defs = [{
      re: /^(\w{2})(\w{2})(\w{2})$/,
      process: function(bits) {
        return [parseInt(bits[1], 16), parseInt(bits[2], 16), parseInt(bits[3], 16)]
      }
    }, {
      re: /^(\w{1})(\w{1})(\w{1})$/,
      process: function(bits) {
        return [parseInt(bits[1] + bits[1], 16), parseInt(bits[2] + bits[2], 16), parseInt(bits[3] + bits[3], 16)]
      }
    }];
    for (var i = 0; i < colour_defs.length; i++) {
      var re = colour_defs[i].re;
      var processor = colour_defs[i].process;
      var bits = re.exec(colour);
      if (bits) {
        var channels = processor(bits);
        this.r = channels[0];
        this.g = channels[1];
        this.b = channels[2]
      }
    }
    this.r = (this.r < 0 || isNaN(this.r)) ? 0 : ((this.r > 255) ? 255 : this.r);
    this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g);
    this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b)
  }

$scope.RGB=功能（颜色）{
如果（颜色字符（0）=“#”）{
颜色=颜色。子色（1，6）
}
颜色=颜色。替换（//g，“”）；
color=color.toLowerCase（）；
变量颜色定义=[{
re:/^（\w{2}）（\w{2}）（\w{2}）$/，
进程：函数（位）{
返回[parseInt（位[1]，16]，parseInt（位[2]，16），parseInt（位[3]，16）]
}
}, {
re://^（\w{1}）（\w{1}）（\w{1}）$/，
进程：函数（位）{
返回[parseInt（位[1]+位[1]，16），parseInt（位[2]+位[2]，16），parseInt（位[3]+位[3]，16）]
}
}];
对于（变量i=0；i255）？255:this.r）；
this.g=（this.g<0 | | isNaN（this.g））？0:（（this.g>255）？255:this.g）；
this.b=（this.b<0 | | isNaN（this.b））？0:（（this.b>255）？255:this.b）
}

然后
mycl=$scope.RGB（“#背景色”）；
亮度=Math.sqrt（myCol.r*myCol.r*0.299+myCol.g*myCol.g*0.587+myCol.b*myCol.b*0.114）；
$scope.fontcolour=亮度<130？#FFFFFF:“#000000”；

任何改变颜色的尝试都是不好的，而且常常是不可读的

这里是一个演示的逆，我扩展了我的黑白

我刚刚回答了一个与你非常相似的问题。看一看：@Jonathan Willson。回答得很好，但在你的课堂上，你只使用了一种颜色。但就我而言，我不知道颜色。颜色的值来自服务器。我已经尝试过使用单一颜色了OK，明白了。我正在从服务器获取obj。这一颜色无法修改YY你可以修改你使用的变量，而不是从服务器检索到的数据。请检查我的编辑。答案很好，但我想在单击按钮时应用两种css样式。默认情况下不适用于jQuery。不适用于angularjs。你能为angularjs做同样的事情吗
var app = angular.module('app', []);

app.controller('myCtrl', function ($scope) {


    $scope.invertColor = function (hexTripletColor) {
        var color = hexTripletColor;
        color = color.substring(1); // remove #
        color = parseInt(color, 16); // convert to integer
        color = 0xFFFFFF ^ color; // invert three bytes
        color = color.toString(16); // convert to hex
        color = ("000000" + color).slice(-6); // pad with leading zeros
        color = "#" + color; // prepend #
        return color;
    }

    $scope.obj = [{
        'id': 1,
            'color': '#ff0000',
            'name': 'final'
    }, {
        'id': 2,
            'color': '#ffff99',
            'name': 'start'
    }];

    $scope.UpdateColor = function (item) {

        item.color = $scope.invertColor(item.color);

    };

    $scope.getMyStyle = function (item) {
        var myStyle = {
            'background-color': item.color,
            color: $scope.invertColor(item.color)
        }
        return myStyle;
    }


});

$scope.RGB = function(colour) {
    if (colour.charAt(0) == "#") {
      colour = colour.substr(1, 6)
    }
    colour = colour.replace(/ /g, "");
    colour = colour.toLowerCase();
    var colour_defs = [{
      re: /^(\w{2})(\w{2})(\w{2})$/,
      process: function(bits) {
        return [parseInt(bits[1], 16), parseInt(bits[2], 16), parseInt(bits[3], 16)]
      }
    }, {
      re: /^(\w{1})(\w{1})(\w{1})$/,
      process: function(bits) {
        return [parseInt(bits[1] + bits[1], 16), parseInt(bits[2] + bits[2], 16), parseInt(bits[3] + bits[3], 16)]
      }
    }];
    for (var i = 0; i < colour_defs.length; i++) {
      var re = colour_defs[i].re;
      var processor = colour_defs[i].process;
      var bits = re.exec(colour);
      if (bits) {
        var channels = processor(bits);
        this.r = channels[0];
        this.g = channels[1];
        this.b = channels[2]
      }
    }
    this.r = (this.r < 0 || isNaN(this.r)) ? 0 : ((this.r > 255) ? 255 : this.r);
    this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g);
    this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b)
  }

myCol = $scope.RGB('#backgroundColour');
brightness = Math.sqrt(myCol.r * myCol.r * 0.299 + myCol.g * myCol.g * 0.587 + myCol.b * myCol.b * 0.114);
$scope.fontcolour = brightness < 130 ? "#FFFFFF" : "#000000";