Angular 检查一个或多个 ng-if 语句是否为真

Question

我有一种情况，我正在构建一个动态 table，其中单元格包含使用多个 ng-if 语句的数据聚合。基本上我需要知道 if 语句的 none 是否为真，所以我可以再做一个 ng-if.

这是我正在做的一个简化示例。大约有 20 列具有不同的聚合结果。

<table>
    <tr ng-repeat="record in data">
        <td>
            <span ng-if="record.some_number > 0 && record.type == 'SomeType'">{{data1}}</span>
            <span ng-if="record.age >= 20 && record.age <= 50 && record.gender == 'MALE'">{{data2}}</span>
            <span ng-if="(record.age <= 20 || record.age >= 50) && record.gender == 'FEMALE'">{{data3}}</span>
            <span ng-if="!(record.some_number > 0 && record.type == 'SomeType') && !(record.age >= 20 && record.age <= 50 && record.gender == 'MALE') && !((record.age <= 20 || record.age <= 50) && record.gender == 'FEMALE')">{{data4}}</span>
        </td>
    </tr>
<table>

我不能使用 ng-switch，因为条件完全不同。这是数据的聚合，而不是 if/else。我更喜欢一种不同的方法，而不是只添加一个 '!'到另一个跨度中的每个条件，因为我的一些聚合包含许多条件，并且一些 if 语句不是微不足道的。还有许多聚合单元，因此在过于复杂的 'else' 条件下维护将是一场噩梦。

理想情况下，我希望能够在任何 ng-if 语句为真时将单个变量分配给真。有什么想法吗？

Answer 1

我不知道这是不是最佳实践，但我相信你应该在你的 JS 中包含所有逻辑，而 HTML 应该只是一个模板，它反映了你的范围的状态正在展示。

以这种方式，您的条件将始终在您的 JS 中进行检查。

更新： 基于新内容：

所以你有数据，看起来你需要先处理它，否则你的应用程序性能会因观察者过载而受到影响。

首先：简化你的HTML，所有像record.some_number > 0 && record.type == 'SomeType'"这样的逻辑都属于JS。

<table>
    <tr ng-repeat="record in data"> 
        <td>
            <span ng-repeat="item in record.dataToShow" ng-bind-html='item'></span> // now you just repeat the data that has been processed
        </td>
    </tr>
</table>

第二：在你的 JavaScript 中循环处理。

$scope.data = [ some array with lots of stuff ];

for( var idx in $scope.data ){
    var record = $scope.data[ idx ]; // assuming JSON object
    var dataToShow = []; // store your data(s) in an array

    // if a condition is met, push your data onto the array
    if( record.some_number > 0 && record.type == 'SomeType' ){
        dataToShow.push( data1 );
    }
    if( record.age >= 20 && record.age <= 50 && record.gender == 'MALE' ){
        dataToShow.push( data2 );
    }
    // continue processing conditions

    if( dataToShow.length === 0 ){ // none have been true if array is empty
        // do something
    }
    record.dataToShow = dataToShow;
}

https://plnkr.co/edit/ZPbui4rLwGGVVD4B90b9?p=preview

Answer 2

获取范围函数来决定如何处理各种条件下的 ng-if。

<span ng-if="showHideCell(this)">{{data1}}</span>
<span ng-if="showHideCell(this)">{{data2}}</span>

在你的控制器中..

$scope.showHideCell = function(ele) {

    //Your complex condition here

    return decition;   // true or false
}

如果应用程序对吞吐量至关重要并且有很多控件，我建议在他的回答中使用 SoluableNonagon 的方法。在那里，每个消化周期只会检查一个变量。

Answer 3

您可能对 https://github.com/zachsnow/ng-elif 感兴趣，它是 angular 的 ng-if 的一个很好的 if-elseif-else 扩展。

Answer 4

您可以在控制器中使用通用方法来检查元素的条件，同时您可以使用另一个方法，它将应用于所有元素，本质上是调用前面提到的通用方法。

Here 是一个笨蛋，正在做一些类似于你想要实现的事情，可能会给你一个想法。

我在这里做的是，例如，有两个数组，一个有奇数值，一个只有偶数值。我在控制器上有一个方法 condition 接受一个值（从 ng-repeat 循环获取数组的值）和一个调用 condition 的 all 方法。

  $scope.condition = function(element, value) {
    // Just returns true for even values

    if (typeof value === "number")
      return value % 2 == 0;
    else if (value instanceof Array) {
      return value.every(function(item) {
        return item % 2 == 0;
      });
    }

  }

  $scope.all = function(element, value) {
    return $scope.condition(element, value);
  }

您可以使用类似的方法。

Angular 检查一个或多个 ng-if 语句是否为真

Angular check for one or more ng-if statements are true

javascript

angularjs

angular-ng-if