【问题标题】:Using & (bitwise AND operator) in Angular ng-if expressions在 Angular ng-if 表达式中使用 &(按位与运算符)
【发布时间】:2016-09-02 14:33:28
【问题描述】:

我无法让 & 运算符在 Angular ng-if 表达式中工作(与一些位标志一起使用)。假设我们有一些这样的 HTML:

<div ng-if="value & 2"> </div>

如果value 等于 3,则按位运算应返回 2,从而返回真值。

然而,Angular 每次都会抛出一个Syntax Error 异常。不允许操作吗?还是我做错了什么?

链接到plunker

编辑:我已经使用一个简单的函数解决了我的问题:

$scope.checkFlag = function(value, flag){
   return value & flag;
}

但我真的不喜欢这个解决方案。有没有办法在ng-if 中使用它(显然不使用该函数)?

【问题讨论】:

    标签: javascript angularjs syntax bitwise-operators and-operator


    【解决方案1】:

    您不能在 Angular 表达式中使用按位 &amp; 运算符。根据documentation

    Angular 表达式类似于 JavaScript 表达式,但有以下区别:

    • ...
    • 您不能在 Angular 表达式中使用按位、,void 运算符。

    如果您想运行更复杂的 JavaScript 代码,您应该将其设为控制器方法并从您的视图中调用该方法。

    关于命名的注意事项:&amp;按位 AND 运算符; &amp;&amp;逻辑 AND 运算符。

    更新:您的 checkFlag 函数可能是最好的解决方法,因为它的名称清楚地表明了它的作用(这就是我将使用的),但如果您绝对 不想要额外的函数,可以使用下面的等价表达式:

    <div ng-if="value % 4 >= 2"> </div>
    

    一般来说,(value &amp; x) != 0(其中x 是 2 的幂)等价于value % (2 * x) &gt;= x

    【讨论】:

      【解决方案2】:

      可以使用按位管道完成此操作:

      import { Pipe, PipeTransform } from '@angular/core';
      
      @Pipe({
        name: 'hasFlags'
      })
      export class HasFlagsPipe implements PipeTransform {
      
        transform(flagsL: number, flagsR: number): boolean {
          return (flagsL & flagsR) != 0;
        }
      
      }
      

      用法:

      <div [hidden]="flagsL | hasFlags : flagsR">
      

      注意:我使用的是 angular 2+,但偶然发现了这篇文章,因此希望这对其他人有所帮助。

      【讨论】:

        【解决方案3】:

        我不确定你想在这里完成什么,但你使用的是按位 AND 运算符。在角度文档中它说:

        没有按位、逗号和空运算符:您不能在 Angular 表达式中使用按位、、或空运算符。

        AngularJS expression

        【讨论】:

          【解决方案4】:

          问题在于您使用的是&amp; 而不是&amp;&amp;&amp; 是位运算符,Angular 不允许在表达式中使用位运算符。

          【讨论】:

          • 我认为他实际上是在尝试使用按位运算符,所以我不知道您的第一句话是否属实。除非 && 以某种角度模仿这种行为,否则我就是个白痴。
          • 是的,我正在尝试专门使用按位运算。我想使用按位运算来处理我的位标志。
          • 啊,我明白了。好吧,正如 Michael 和 Vilius 所展示的,Angular 不允许在他们的表达式中按位。
          【解决方案5】:

          由于没有人提供解决方案,我假设您可以将您的 html 修改为:

          <body ng-controller="MainCtrl">
             <div ng-if="check(value,2)">Hey! </div>
          </body>
          

          $scope.check = function(val, providedInt){
             return val & providedInt;
           };
          

          See plunkr!

          【讨论】:

            猜你喜欢
            • 2023-04-02
            • 2013-05-28
            • 1970-01-01
            • 2014-08-13
            • 2013-01-16
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多