获取 ng-repeat 的匹配 ng-if 的数量
Get number of matching ng-if of a ng-repeat
假设我有类似的东西:
<md-grid-tile class="gray" ng-repeat="carto in cartoList" ng-if="search(carto)">
<md-button ng-click="changeSVG(carto.fileName)" aria-label="carto.displayName">
<img src="style/images/thumbnails/{{carto.fileName}}.png" width="100%" height="100%" title="{{carto.fullDisplayName}}" style="max-height: 220px;"></img>
</md-button>
<md-grid-tile-footer><h3 align="center">{{carto.displayName}}</h3> </md-grid-tile-footer>
</md-grid-tile>
有没有办法检索显示的图块数?表示 ng-repeat
中匹配 ng-if
的元素数:
<md-grid-tile class="gray" ng-repeat="carto in cartoList" ng-if="search(carto)">
根据要求,search
函数:
$scope.search = function (carto) {
if ($scope.sideMenu) {
var searchRegex = new RegExp('global', 'i');
if (carto.fullDisplayName.search(searchRegex) != -1)
return true;
}
else if ($scope.sideSearch) {
if ($scope.searched.IS.indexOf(carto.informationSystem) === -1 && carto.informationSystem)
return false;
if ($scope.searched.area.indexOf(carto.area) === -1 && carto.area)
return false;
if ($scope.searched.block.indexOf(carto.block) === -1 && carto.block)
return false;
if ($scope.searched.type.indexOf(carto.type) === -1 && carto.type)
return false;
if ($scope.searched.level.indexOf(carto.level) === -1 && carto.level)
return false;
if ($scope.searchInput) {
var searchRegex = new RegExp($scope.searchInput, 'i');
if (carto.fullDisplayName.search(searchRegex) === -1)
return false;
}
if (!$scope.homeVisible) {
$scope.homeVisible = true;
window.history.pushState("newUrl", "CartoViewer", window.location.origin + window.location.pathname);
}
return true;
}
else
return true;
};
就个人而言,我会在 将其发送到视图之前过滤 cartoList
:
$scope.cartoListFiltered = function() {
return $scope.cartoList.filter($scope.search);
};
在您看来:
<md-grid-tile class="gray" ng-repeat="carto in cartoListFiltered()">
<md-button ng-click="changeSVG(carto.fileName)" aria-label="carto.displayName">
<img src="style/images/thumbnails/{{carto.fileName}}.png" width="100%" height="100%" title="{{carto.fullDisplayName}}" style="max-height: 220px;"></img>
</md-button>
<md-grid-tile-footer><h3 align="center">{{carto.displayName}}</h3> </md-grid-tile-footer>
</md-grid-tile>
这会针对每个人 carto
运行您的 $scope.search
,并且仅包括 return 正确的 carto
。与 ng-if
相同,除了逻辑在控制器上执行(它应该在的地方)
假设我有类似的东西:
<md-grid-tile class="gray" ng-repeat="carto in cartoList" ng-if="search(carto)">
<md-button ng-click="changeSVG(carto.fileName)" aria-label="carto.displayName">
<img src="style/images/thumbnails/{{carto.fileName}}.png" width="100%" height="100%" title="{{carto.fullDisplayName}}" style="max-height: 220px;"></img>
</md-button>
<md-grid-tile-footer><h3 align="center">{{carto.displayName}}</h3> </md-grid-tile-footer>
</md-grid-tile>
有没有办法检索显示的图块数?表示 ng-repeat
中匹配 ng-if
的元素数:
<md-grid-tile class="gray" ng-repeat="carto in cartoList" ng-if="search(carto)">
根据要求,search
函数:
$scope.search = function (carto) {
if ($scope.sideMenu) {
var searchRegex = new RegExp('global', 'i');
if (carto.fullDisplayName.search(searchRegex) != -1)
return true;
}
else if ($scope.sideSearch) {
if ($scope.searched.IS.indexOf(carto.informationSystem) === -1 && carto.informationSystem)
return false;
if ($scope.searched.area.indexOf(carto.area) === -1 && carto.area)
return false;
if ($scope.searched.block.indexOf(carto.block) === -1 && carto.block)
return false;
if ($scope.searched.type.indexOf(carto.type) === -1 && carto.type)
return false;
if ($scope.searched.level.indexOf(carto.level) === -1 && carto.level)
return false;
if ($scope.searchInput) {
var searchRegex = new RegExp($scope.searchInput, 'i');
if (carto.fullDisplayName.search(searchRegex) === -1)
return false;
}
if (!$scope.homeVisible) {
$scope.homeVisible = true;
window.history.pushState("newUrl", "CartoViewer", window.location.origin + window.location.pathname);
}
return true;
}
else
return true;
};
就个人而言,我会在 将其发送到视图之前过滤 cartoList
:
$scope.cartoListFiltered = function() {
return $scope.cartoList.filter($scope.search);
};
在您看来:
<md-grid-tile class="gray" ng-repeat="carto in cartoListFiltered()">
<md-button ng-click="changeSVG(carto.fileName)" aria-label="carto.displayName">
<img src="style/images/thumbnails/{{carto.fileName}}.png" width="100%" height="100%" title="{{carto.fullDisplayName}}" style="max-height: 220px;"></img>
</md-button>
<md-grid-tile-footer><h3 align="center">{{carto.displayName}}</h3> </md-grid-tile-footer>
</md-grid-tile>
这会针对每个人 carto
运行您的 $scope.search
,并且仅包括 return 正确的 carto
。与 ng-if
相同,除了逻辑在控制器上执行(它应该在的地方)