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。我更喜欢采用不同的方法来添加＆＃39;！＆＃39;因为我的一些聚合包含许多条件而某些if语句不是微不足道的。还有许多聚合单元因此维护过于复杂的“其他”细胞。条件将是一场噩梦。

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

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循环中获取数组的值）和一个调用all的{{1}}方法。

condition

您可以采用类似的方法。

对一个或多个ng-if语句进行角度检查是正确的

4 个答案: