Question

我几天前开始学习角度，我一直在尝试根据用户的文本输入更新div的颜色，但我似乎无法让它工作，我想知道我是否会这样做这是错误的方式。

我在这些主题上看到过很多帖子和答案，人们希望使用复选框或类似内容来更新颜色。为此，允许有一定数量的颜色，因此可以创建类，并且可以使用ng-class指令。显然我可以使用文本输入框执行此操作，但我正在寻找允许任何可能的十六进制颜色值的功能，而我宁愿不为此写出每个类。

我的意思是这样可行：

HTML

<div ng-app='root' ng-controller = 'index'>
  <input type ='text' ng-model ='myColour'>

  <div ng-style = "{'color': {{myColour}}}" >
  </div>
</div>

JS

(function(){
  var app = angular.module("root", []);

  app.controller("index", function() {

  });
})();

我真的不明白为什么这不起作用所以如果有人能够解释原因并且可能指出我采用更好的方法，我会很感激吗？

编辑：对于可能还需要解决方案的任何人来说，问题在于

<div ng-style = "{'color': {{myColour}}}" >

我不得不摆脱双花括号，但保持单引号颜色如此

<div ng-style = "{'color': myColour}" >

Answer 1

你的ng风格的右手边是一个有角度的表达，所以你不需要{{}}使用＆＃34; myColour＆＃34;模型。将您的代码更改为

<div ng-style = "{color: myColour}" >

这对你有用。

Answer 2

使用Ng样式或简单样式更新颜色也可以使用。您可以按照以下方式使用它：{{colorVal}}。或者使用Ng样式作为ng-style：＆＃34; {colorVal}＆＃34;

以角度

2 个答案: