当有5个条件中的任何一个为真时,我需要显示一个div。
问题是ng-show
似乎只考虑前3个条件。我不知道这是否只是我的问题,因为我找不到任何相关的问题。
在下面的示例中,我保持移动条件,但每次只考虑前3个条件。无论条件属于第4位,都不显示div。
如果您知道可以解决的问题,请告诉我,如果不能超过3个条件。
这是一个非常大的div,所以我只发布一部分:
<div class="row " ng-show="selectedAllP[0] || selectedAllF[0] || selectedAllP || selectedAllD || level">
<div class="row selectedCase">
<div><h3 id="choices">Your choices:</h3></div>
<div class="col-md-4" id="publisher">
<h4>Publishers</h4>
<div class="level" ng-hide="selectedAllP[0] || selectedAllP">Select publisher</div>
<table class="table table-bordered table-striped">
<tbody id="pub">
<tr ng-hide="selectedAllP.Name === ' - Any Publisher -'" ng-repeat="roll in selectedAllP" ng-click="deSelectP(roll)">
<td class="deselect">{{roll.Name}}</td>
</tr>
<tr ng-show="selectedAllP.Name === ' - Any Publisher -'" ng-click="deSelectP(selectedAllP)">
<td class="deselect">{{selectedAllP.Name}}</td>
</tr>
</tbody>
</table>
<p ng-show="noticeAnyPublisher && selectedAllP.Name === ' - Any Publisher -'" class="notice">{{noticeAnyPublisher}}</p>
</div>
以及div的一部分的逻辑:
$scope.selectedAllP = [];
$scope.setSelectedP = function (publisher) {
$scope.selectedP = publisher.Name;
// Check if the selected publisher is already in the array
// if it isn't, than push it in the array (else do nothing)
if (publisher.Name == " - Any Publisher -"){
$scope.selectedAllP = publisher;
console.log($scope.selectedAllP);
} else if ($scope.selectedAllP.Name == " - Any Publisher -") {
$scope.noticeAnyPublisher = 'Deselect "Any Publisher" first';
console.log("blblblb");
} else if ($scope.selectedAllP.indexOf(publisher) == -1) {
$scope.selectedAllP.push(publisher);
}
console.log($scope.selectedP, $scope.selectedAllP);
};
$scope.deSelectP = function (dePublisher) {
// Check if the selected publisher is already in the array
// if it is, than remove it from the array (else do nothing)
if (dePublisher.Name == " - Any Publisher -") {
$scope.selectedAllP = [];
$scope.selectedP = 0;
$scope.noticeAnyPublisher = '';
} else {
var idx = $scope.selectedAllP.indexOf(dePublisher);
if (idx != -1) {
$scope.selectedAllP.splice(idx, 1);
$scope.selectedP = $scope.selectedAllP[0].Name;
}
}
};
我想当我选择第四个条件(在这种情况下是|| selectedAllD)来显示上面的div时,但正如你所看到的,即使选择了分配器(并且在控制台中存在selectedAllD),div也不会显示。检查下一个图像,看看当我选择第三个条件时显示的div(selectedAllF [0])。
div选择第3个条件时显示(selectedAllF [0])。它也显示了fisrt 2条件。问题是它的行为是相同的,无论条件的顺序如何(它只考虑前3个条件)。
你可以在你的ng-show
中调用一个方法。
<div class="row " ng-show="showRow()">
并将该函数声明到您的.js
文件中。
$scope.showRow = function () {
return $scope.selectedAllP[0] || $scope.selectedAllF[0] || $scope.selectedAllP || $scope.selectedAllD || $scope.level;
}
无论您将多少条件传递给ng-show
或任何接受表达式的ohter指令。请参阅此文档Angular Expressions。因此,请检查条件语句的所有部分。在这种表示中,每当有至少1个返回true
的语句时,它将被评估为真。另外值得注意的是,这个表达式将从左到右进行评估,并且将找到UNTIL第一个真实语句。