Угловая проверка для одного или нескольких утверждений ng-if

77
8

У меня есть ситуация, когда я создаю динамическую таблицу, где ячейки содержат совокупность данных, используя несколько операторов 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 не являются тривиальными. Существует также много совокупных ячеек, поэтому поддержание чрезмерно сложных "других" условий было бы кошмаром.

В идеале мне бы хотелось просто присвоить единственную переменную true для любого утверждения ng-if являющегося истинным. Есть предположения?

спросил(а) 2021-01-27T20:03:08+03:00 4 месяца, 3 недели назад
1
Решение
63

Я не знаю, что это лучшая практика, но я считаю, что у вас должна быть вся ваша логика в 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

ответил(а) 2021-01-27T20:03:08+03:00 4 месяца, 3 недели назад
45

Вы можете использовать общий метод в своем контроллере, чтобы проверить свои условия на элементах, в то время как у вас может быть еще один, который будет применяться ко всем из них, по существу назвав общий метод, упомянутый ранее.

Вот плунж, делающий что-то похожее на то, что вы хотите достичь, может дать вам представление.

То, что я здесь делаю, состоит в том, чтобы иметь, например, два массива, один с нечетными значениями и один с даже только значениями. У меня есть 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);
}

Вы можете работать над подобным подходом.

ответил(а) 2021-01-27T20:03:08+03:00 4 месяца, 3 недели назад
44

Получите функцию области действия, чтобы решить, как обращаться с 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 в своем ответе. Там каждый цикл пищеварения будет проверять только переменную.

ответил(а) 2021-01-27T20:03:08+03:00 4 месяца, 3 недели назад
46

Вам может быть интересно https://github.com/zachsnow/ng-elif, что является довольно хорошим расширением if-elseif-else для углового ng-if.

ответил(а) 2021-01-27T20:03:08+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема