Ng-if, не равный?
У меня есть простой ng-reapt, который отображает список значений. На некоторых выходах у меня есть пара ng-if, чтобы показать/скрыть DIV.
HTML:
<div ng-repeat="details in myDataSet">
<p>{{ details.Name }}</p>
<p>{{ details.DOB }}</p>
<div ng-if="details.Payment[0].Status == '0'">
<p>No payment</p>
</div>
<div ng-if="details.Payment[0].Status == '1' || details.Payment[0].Status == '2'">
<p>Late</p>
</div>
<div ng-if="details.Payment[0].Status == '3' || details.Payment[0].Status == '4' || details.Payment[0].Status == '5'">
<p>Some payment made</p>
</div>
<div ng-if="details.Payment[0].Status == '6'">
<p>Late and further taken out</p>
</div>
<div ng-if="details.Payment[0].Status != '0' || details.Payment[0].Status != '1' || details.Payment[0].Status != '2' || details.Payment[0].Status != '3' || details.Payment[0].Status != '4' || details.Payment[0].Status != '5' || details.Payment[0].Status != '6'">
<p>Error</p>
</div>
<p>{{ details.Gender}}</p>
</div>
В моем приложении отображается сообщение об ошибке при попытке отобразить раздел !=
.
Ответы
Ответ 1
Вот отличное решение с фильтром:
app.filter('status', function() {
var statusDict = {
0: "No payment",
1: "Late",
2: "Late",
3: "Some payment made",
4: "Some payment made",
5: "Some payment made",
6: "Late and further taken out"
};
return function(status) {
return statusDict[status] || 'Error';
};
});
Разметка:
<div ng-repeat="details in myDataSet">
<p>{{ details.Name }}</p>
<p>{{ details.DOB }}</p>
<p>{{ details.Payment[0].Status | status }}</p>
<p>{{ details.Gender}}</p>
</div>
Ответ 2
Лучше использовать ng-switch
<div ng-switch on="details.Payment[0].Status">
<div ng-switch-when="1">
<!-- code to render a large video block-->
</div>
<div ng-switch-default>
<!-- code to render the regular video block -->
</div>
</div>
Ответ 3
Что лишняя логика в частичных, уменьшите ее до чего-то вроде этого и обработайте свои данные в контроллере/службе, где это должно быть
<div ng-repeat="details in myDataSet">
<p>{{ details.Name }}</p>
<p>{{ details.DOB }}</p>
<p>{{details.Payment[0].StatusName}}</p>
<p>{{ details.Gender}}</p>
</div>
JS:
angular.forEach(myDataSet.Payment, function (payment) {
if(payment.Status === 0){
payment.StatusName = 'No Payment';
} else if(payment.Status === 1 || payment.Status === 2){
payment.StatusName = 'Late';
} else if(payment.Status === 3 || payment.Status === 4 || payment.Status === 5){
payment.StatusName = 'Some payment made';
} else if(payment.Status === 6){
payment.StatusName = 'Late and further taken out';
}else{
payment.StatusName = 'Error';
}
})
Ответ 4
Попробуйте следующее:
ng-if="details.Payment[0].Status != '6'".
Извините, но я думаю, вы можете использовать ng-show или ng-hide.
Ответ 5
Мне не нравятся "хаки", но в кратчайшие сроки в течение крайнего срока я сделал это
<li ng-if="edit === false && filtered.length === 0">
<p ng-if="group.title != 'Dispatcher News'" style="padding: 5px">No links in group.</p>
</li>
Да, у меня есть еще одна внутренняя вложенная ng-if, мне просто не понравилось слишком много условий на одной строке.
Ответ 6
Попробуйте ниже решение
ng-if="details.Payment[0].Status != '0'"
Use below condition(! prefix with true condition) instead of above
ng-if="!details.Payment[0].Status == '0'"
Ответ 7
Здесь есть довольно хорошие решения, но они не помогают понять, почему проблема на самом деле происходит.
Но это очень просто, вам просто нужно понять, как работает логика OR ||
. Целое выражение будет оцениваться до true
, когда любая из его сторон оценивает true
.
Теперь посмотрим на ваше дело. Предположим, что целое details.Payment[0].Status
есть Status
, и это число для краткости. Тогда имеем Status != 0 || Status != 1 || ...
.
Представьте Status = 1
:
( 1 != 0 || 1 != 1 || ... ) =
( true || false || ... ) =
( true || ... ) = ... = true
Теперь представьте Status = 0
:
( 0 != 0 || 0 != 1 || ... ) =
( false || true || ... ) =
( true || ... ) = ... = true
Как вы даже не имеете значения, что у вас есть как ...
как логическое OR
первых двух выражений, вы получите true
, который будет результатом полного выражения.
То, что вам действительно нужно, является логическим AND
&&
, которое будет истинным, только если и его стороны true
.
Ответ 8
Теперь это возможно по AngularJS 1.5.10, используя ng-switch-when-separator
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
$scope.myDataSet = [{Name: 'Michelle', Gender: 'Female', DOB: '01/12/1986', Payment: [{Status: '0'}]},{Name: 'Steve', Gender: 'Male', DOB: '11/12/1982', Payment: [{Status: '1'}]},{Name: 'Dan', Gender: 'Male', DOB: '03/22/1976', Payment: [{Status: '2'}]},{Name: 'Doug', Gender: 'Male', DOB: '02/02/1980', Payment: [{Status: '3'}]},{Name: 'Mary', Gender: 'Female', DOB: '04/02/1976', Payment: [{Status: '4'}]},{Name: 'Cheyenne', Gender: 'Female', DOB: '07/10/1981', Payment: [{Status: '5'}]},{Name: 'Bob', Gender: 'Male', DOB: '02/16/1990', Payment: [{Status: '6'}]},{Name: 'Bad data', Gender: 'Blank', DOB: '01/01/1970', Payment: [{Status: '7'}]}];
});
<script src="https://code.angularjs.org/1.5.10/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="details in myDataSet" ng-switch on="details.Payment[0].Status">
<p>{{ details.Name }}</p>
<p>{{ details.DOB }}</p>
<div ng-switch-when="0">
<p>No payment</p>
</div>
<div ng-switch-when="1|2" ng-switch-when-separator="|">
<p>Late</p>
</div>
<div ng-switch-when="3|4|5" ng-switch-when-separator="|">
<p>Some payment made</p>
</div>
<div ng-switch-when="6">
<p>Late and further taken out</p>
</div>
<div ng-switch-default>
<p>Error</p>
</div>
<p>{{ details.Gender}}</p>
</div>
</div>