Question

我有多个按钮可以更改文本颜色的CSS属性。我可以使用静态值（例如'blue'或'red'）来实现此功能，但我想访问保存在控制器内对象中的十六进制代码值。

<body ng-app="MyApp" ng-controller="AppCtrl">
  <input type="button" value="blue" ng-style="{color: 'blue'}" 
    ng-click="myColor = { color:'blue' }">
  <div ng-repeat="person in people" ng-style="myColor">
    Name: {{ person.name }} <br>
    Birth Year: {{ person.birth }}<p>
  </div>
</body

这是我的控制器

var app = angular.module('MyApp', []);
app.controller('AppCtrl', function($scope) {

$scope.colors = [
  { color: 'b1', value: '#000000' },  //black
  { color: 'b2', value: '#000099' },  //blue
  { color: 'r1', value: 'ff0000' },   //red
  { color: 'y1', value: '#ffff00' }   //yellow
];

$scope.people = [
  { name: 'Abraham Lincoln', birth: '1809' },
  { name: 'Benjamin Franklin', birth: '1706' },
  { name: 'George Washington', birth: '1732' }
];

})

我想改变

ng-click="myColor = { color:'blue' }"

以及

的内容

ng-click="myColor = { color:'colors[1].value' }

Answer 1

你可以通过调用ng-style

上的函数来调用它

<div ng-repeat="person in people" ng-click="person.color = colors[$index].color" ng-style="{color: person.color}">
    Name: {{ person.name }} <br>
    Birth Year: {{ person.birth }}<p>
</div>

不确定哪种颜色应该绑定到哪个person，所以我根据索引
采用了颜色

Answer 2

查看ngStyle docs：

对于其键为CSS样式名称和值的对象的表达式是这些CSS键的对应值。由于某些CSS样式名称不是对象的有效键，因此必须引用它们。

所以你可以把它改成：

ng-click="myColor = { 'color':colors[1].value }

我在搜索时发现了这一点：https://stackoverflow.com/a/21364563/643779

Answer 3

只需这样使用：

<input type="button" value="blue" ng-style="{color: 'blue'}" 
     ng-click="myColor = {color: colors[1].value}">

<input type="button" value="red" ng-style="{color: 'red'}" 
     ng-click="myColor = {color: colors[2].value}">

<input type="button" value="yellow" ng-style="{color: 'yellow'}" 
     ng-click="myColor = {color: colors[3].value}">

AngularJS通过ng-click绑定CSS值。值位于控制器中的对象中

3 个答案: