编程系列灯会转 on/off

Question

我有 5 个 on/off 灯，我想在 angular 中对其进行动态管理。如下所示：

lights

这些与（工作）滑块平行放置，我希望它们共享相同的范围。

基本逻辑是，当滑块位于 3 时，灯 1、2 和 3 应该 ON，灯 4 和关应该 OFF。有两个CSSclass表示这个green-on和green-off。

硬编码HTML:

<span class="light green-off"></span><span>4</span><br />
<span class="light green-off"></span><span>3</span><br />
<span class="light green-off"></span><span>2</span><br />
<span class="light green-off"></span><span>1</span><br />
<span class="light red-off"></span><span>OFF</span>

我在 angular 中知道要创建如下指令：

<div lights ng-model="lightValue"></div>

指令

angularApp.directive('lights', function () {
    return {
        restrict: 'A',
        scope: {
            ngModel: '='
        },
        link: function (scope, element, attrs) {
            return scope.$watch('ngModel', function (newVal) {
                if (newVal !== null) {
                    //update
                }
            });
        }
    }
});

这将监听范围为 0-4 的 lightValue 值。

但我不知道将上述逻辑放在哪里，这将根据值更改 class。

我是在link中创建模板还是returnHTML并使用$compile？

最后，有没有比使用ifs分配class更有效的方法（下面的伪代码）？

if (lightValue == 4) {
    light1 = on;
    light2 = on;
    light3 = on;
    light4 = on;
} else if (lightValue == 3) {
    light1 = on;
    light2 = on;
    light3 = on;
} else if (lightValue == 2) {
    light1 = on;
    light2 = on;
} //etc..

更新：

谢谢，我能够将 ngClass 与一些条件语句一起使用以达到预期的效果：

<span class="light" ng-class="{'green-on' : notches == 4, 'green-off' : notches < 4 }"></span><span>4</span><br />
<span class="light" ng-class="{'green-on' : notches >= 3, 'green-off' : notches < 3 }"></span><span>3</span><br />
<span class="light" ng-class="{'green-on' : notches >= 2, 'green-off' : notches < 2 }"></span><span>2</span><br />
<span class="light" ng-class="{'green-on' : notches >= 1, 'green-off' : notches < 1 }"></span><span>1</span><br />
<span class="light" ng-class="{'red-on' : notches == 0, 'red-off' : notches > 0 }"></span><span>OFF</span>

我想我可以尝试将其写入指令以使其可重用。

Answer 1

ng-class

根据范围值更改 class

来自 ng-class official doc:

<p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax   Example</p>
<input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
<input type="checkbox" ng-model="important"> important (apply "bold" class)<br>
<input type="checkbox" ng-model="error"> error (apply "red" class)

Finally, is there a more efficient way than using ifs to assign the class (psuedo code below)?

是的，只需在 html 模板中使用 ng-class 和简单逻辑

Answer 2

我会假设你的滑块当前触发一个基于零的整数值，具体取决于它所在的位置，改变 lightValue。那么你的灯 class 应该会根据它激活。

<span ng-class="{'green-off' : lightValue <= 4 }" class="light"></span><span>4</span><br />
<span ng-class="{'green-off' : lightValue <= 3 }" class="light"></span><span>3</span><br />
<span ng-class="{'green-off' : lightValue <= 2 }" class="light"></span><span>2</span><br />
<span ng-class="{'green-off' : lightValue <= 1 }" class="light"></span><span>1</span><br />
<span ng-class="{'green-off' : lightValue <= 0 }" class="light"></span><span>off</span>

您当然可以使此循环动态生成跨度等。

Answer 3

你所需要的只是像这样在每个元素上添加一个 ng-class...

<span class="light green-off" ng-class='{your-class-to-add : lightValue == 4}'>4</span>

因此，如果 'lightValue' 是您控制器中的一个变量，如果该变量 = 4，则 'your-class-to-add' class 将添加到该元素。

编程系列灯会转 on/off

Programming series of lights that turn on/off

angularjs

angularjs-directive

硬编码HTML:

指令

更新：