javascript - AngularJS 通过 ng-click 绑定(bind) CSS 值。值位于 Controller 中的对象中

标签 javascript css angularjs data-binding

Here is a Codepen link

我有多个按钮可以更改文本颜色的 CSS 属性。我可以使用诸如“蓝色”或“红色”之类的静态值来实现此功能,但我想访问保存在我的 Controller 中的对象中的十六进制代码值。

<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

这是我的 Controller

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

最佳答案

您可以通过在 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>

Not sure which color should be binding to which person, so I took color based on index

关于javascript - AngularJS 通过 ng-click 绑定(bind) CSS 值。值位于 Controller 中的对象中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34863104/

相关文章:

javascript - 如何在 dragover/dragenter HTML 5 拖放期间更改图标

html - 使用 ng-class 应用特定类或默认值

javascript - 用户界面路由器 : Parent's resolve not called when state changes

javascript - JS : check if hidden image is still in browser's cache?

javascript - Bing 获取光标位置

google-chrome - 从 css3 border-radius 中删除 -webkit 供应商前缀是否安全?

css - 即使我有 3 个宽度设置为 100% 的容器 div,网站也无法正常显示

javascript - 在 iframe 前面放置 SVG 而不是 PNG

javascript - 如何知道 h1 元素是否已加载?

html - child 忽略 parent 填充