AngularJS:ng-switch-when with OR

时间:2013-01-24 02:17:39

标签: angularjs ng-switch

是否可以在ng-switch-when中使用OR?

<div ng-repeat="w in windows" ng-show="visibleWindowId == w.id" ng-switch="w.type">
    <div ng-switch-when="val1 **OR** val2">
        sup
    </div>
</div>

如果没有,怎么能完成上述工作?

谢谢:)

5 个答案:

答案 0 :(得分:17)

ngswitch仅允许您比较单个条件。

我希望测试您可以使用ng-if

提供的ng-if多个条件

version 1.1.5

请务必注意使用ng-switch和{{1}} Reference结构,而不是显示和隐藏。

当您遍历DOM以查找元素时,这很重要。

答案 1 :(得分:13)

现在可以使用添加到1.5.10中的Angular文档的ng-switch-when-separator

<div ng-repeat="w in windows" ng-show="visibleWindowId == w.id" ng-switch="w.type">
    <div ng-switch-when="val1|val2" ng-switch-when-separator="|">
        sup
    </div>
</div>

答案 2 :(得分:8)

这也会起作用

&#13;
&#13;
<div ng-repeat="w in windows" ng-switch="w.type == 'val1' || w.type == 'val2'">
  <div ng-switch-when="true">
    sup
  </div>
</div>
&#13;
&#13;
&#13;

答案 3 :(得分:5)

我创建了一个简单的指令来代替var ( mu sync.Mutex conns map[string]*websocket.Conn ) func addConn(sessionID string, conn *websocket.Conn) { mu.Lock() prev := conns[sessionID] conns[sessionID] = conn mu.Unlock() if prev != nil { // Close will stop concurrent reads and writes. prev.Close() } } func removeConn(sessionID string, conn *websocket.Conn) { mu.Lock() // We don't simply delete(conns, session) to avoid race on cleanup. if conns[sessionID] == conn { delete(conns, sessionID) } mu.Unlock() } ,它允许您为单个标签指定多个案例。它还允许您指定动态值而不是纯静态值。

有一点需要注意,它只在编译时计算一次表达式,因此必须立即返回正确的值。为了我的目的,这很好,因为我想使用应用程序中其他地方定义的常量。可能会对其进行修改以动态重新评估表达式,但这需要使用ngSwitchWhen进行更多测试。

我使用角度1.3.15,但是我用角度1.4.7进行了快速测试,并且在那里工作得很好。

Plunker Demo

守则

ngSwitch

用法

调节器
module.directive('jjSwitchWhen', function() {
    // Exact same definition as ngSwitchWhen except for the link fn
    return {
        // Same as ngSwitchWhen
        priority: 1200,
        transclude: 'element',
        require: '^ngSwitch',
        link: function(scope, element, attrs, ctrl, $transclude) {
            var caseStms = scope.$eval(attrs.jjSwitchWhen);
            caseStms = angular.isArray(caseStms) ? caseStms : [caseStms];

            angular.forEach(caseStms, function(caseStm) {
                caseStm = '!' + caseStm;
                ctrl.cases[caseStm] = ctrl.cases[caseStm] || [];
                ctrl.cases[caseStm].push({ transclude: $transclude, element: element });
            });
        }
    };
});
模板
  $scope.types = {
      audio: '.mp3', 
      video: ['.mp4', '.gif'],
      image: ['.jpg', '.png', '.gif'] // Can have multiple matching cases (.gif)
  };

答案 4 :(得分:2)

您可以使用ng-class,以便在表达式中使用or运算符。 此外,angular-ui具有if指令。