Angularjs 指令更改输入框的颜色

Question

我正在使用angularjs并且很新，我需要一条指令，根据条件，它将更改具有指令属性的输入框的背景颜色。如何引用调用元素以更改其背景。

Answer 1

你可以用ng-style来做到这一点，无论如何，如果你真的需要它包装在一个指令中，我已经在Plunkr中为你做了

一旦输入更改，它就会更新。

我在那里做的是观察颜色的变化并将其设置为指令中的ng-style并将其排除。

Answer 2

下面是使用 ng-class 时的外观工作示例：观看演示

<div ng-app>
<form>
    <input type="text" ng-class="{ error: faulty }"  size="30"/>
    <input type="checkbox" ng-model="faulty"/> check me
</form>

.error { 
    background-color:red; 
    border:2px solid blue; 
}

Answer 3

请在下面的 plunk 中找到示例。

我创建了指令输入框来执行此操作

<input-Box is-maximized="isMaximized" />

该指令是

<input type="input" ng-class="{mini: (isMaximized == 1), box: (isMaximized == 0)}" />

使用了 ng 类并根据条件更改了颜色。 如果在父控制器中将 isMaximized 设置为 1，它将应用迷你类，如果设置为 0，它将应用 box 类。

http://plnkr.co/edit/ELi3XHk5xWaKMP4MCL2F?p=preview