编程打开/关闭系列灯

Question

我有5个开/关灯，我想以角度动态管理。如下所示：

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

基本逻辑是当滑块位于3时，灯1,2和3应 ON 并点亮4＆amp; off应 OFF 。有两个CSS类可以显示 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> 

我知道在角度来创建一个像这样的指令：

<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
                }
            });
        }
    }
});

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

但我仍然坚持在哪里放置上述逻辑，这将根据值改变类。

我是否在链接中创建模板或返回HTML并使用$ compile？

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

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 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)

  

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

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

Answer 2

我将假设您的滑块当前触发基于零的整数值，具体取决于它的位置，更改lightValue。然后你的灯光类应该根据它激活。

<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'类将被添加到该元素中。