如果语句为true，则对一个或多个ng进行角度检查

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

本文关键字：ng 检查 一个 true 如果 语句      更新时间：2023-09-26

我有一种情况，我正在构建一个动态表，其中的单元格包含使用几个ng-if语句的数据聚合。基本上，我需要知道if语句是否都不是真的，这样我就可以再做一次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开关，因为条件完全不同。这是一个数据集合，而不是if/else。我更喜欢一种不同的方法，而不是只添加一个"！"到另一个跨度中的每个条件，因为我的一些聚合包含许多条件，而一些if语句并非微不足道。还有许多聚集细胞，因此在过于复杂的"其他"条件下维持将是一场噩梦。

理想情况下，我希望能够在任何ng-if语句为true的情况下将单个变量赋值为true。有什么想法吗？

我不知道这是否是一种最佳实践，但我认为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

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

获取一个范围函数来决定如何在各种条件下处理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的方法。在那里，每个消化周期只会检查一个变量。

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

这是一个傻瓜做一些类似于你想要实现的事情，可能会给你一个想法。

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

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

你可以采用类似的方法。

相关文章：