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

请找到以下示例。

我创建了指令inputBox来执行此操作

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

该指令是

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

使用ng-class并根据条件更改颜色。 如果在父控制器中将isMaximized设置为1，则它将应用迷你类；如果将其设置为0，则将应用盒子类。