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

Question

我有一种情况，我正在构建一个动态表，其中的单元格包含使用多个 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-switch，因为条件完全不同。这是数据的聚合，而不是 if/else。我更喜欢一种不同的方法，而不是只添加一个 '!'到另一个跨度中的每个条件，因为我的一些聚合包含许多条件，并且一些 if 语句不是微不足道的。还有许多聚合单元，因此在过于复杂的“其他”条件下进行维护将是一场噩梦。

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

Answer 1

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

以这种方式，您的条件将始终在您的 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