在 ng-click 上动态应用 css

Question

我有一个这样的对象

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>

我的问题是：

1。如何在 ng-click 上应用 background-color 属性来按钮 obj 中存在的内容。

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

这里我试过 ng-class 和 ng-style 但有些地方我做错了。我不知道它在哪里。

谁能帮帮我。谢谢

Answer 1

您可以尝试这样的事情：向数组内的元素添加样式属性：

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> 

This is a JSFiddle I created.希望对你有帮助。

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

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

您不必修改从服务器检索数据的方式（或检索数据的格式）。执行此循环，您只修改您使用的 javascript 对象。这是一种常见的做法。

Answer 2

采用这个反转十六进制颜色的函数

（来源：Automatically change text color to assure readability）

并将其附加到您的 $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-style来设置每一项的background和color：

ng-style="{background:item.color, 'color':invertColor(item.color)}"

在此处查看工作示例：http://jsfiddle.net/wilsonjonash/eAFVk/2/

Answer 3

我正在使用一些 Jonathan 解决方案来使一切正常，请参阅此处：jsfiddle

<div ng-app="app">
    <div ng-controller="myCtrl">
        <div class="btn-group" ng-repeat="item in obj">
            <button type="radio" class="btn-group btn-xs btn-group-xs" ng-style="getMyStyle(item)" ng-click="UpdateColor(item)">{{item.name}} {{item.color}}</button>
        </div>
    </div>
</div>

和JS：

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;
    }


});

Answer 4

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

$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";

任何反转颜色的尝试都是恕我直言，而且通常不可读

这是我用黑白扩展的逆演示

http://jsfiddle.net/maurycyg/f9Re3/83/