ng-repeat with dynamic array:视图未更新
ng-repeat with dynamic array : view not updated
我在这样的块中有一些复选框:
<div ng-show="searchIn.IS" class="filterContent">
<div ng-click="toggleFilter('IS')">
<span class="{{filters.IS}}FilterIcon"></span>
Information System :
</div>
<div ng-show="filters.IS">
<md-checkbox ng-repeat="IS in ISList" ng-click="setISSearch(IS)" ng-checked="isInISSearch(IS)">
{IS}}
</md-checkbox>
</div>
</div>
<br />
<div ng-show="searchIn.area" class="filterContent">
<div ng-click="toggleFilter('area')">
<span class="{{filters.area}}FilterIcon"></span>
Area :
</div>
<div ng-show="filters.area">
<md-checkbox ng-repeat="area in filterAreaList" ng-click="setAreaSearch(area)" ng-checked="isInAreaSearch(area)" ng-show="isInCurrentAreas(area)">
{{area}}
</md-checkbox>
</div>
</div>
因此,每次我选中或取消选中 ISList 块中的复选框时,filterAreaList
都会发生变化。但是视图没有更新,所有区域仍然显示。
我也试过 ng-if
而不是 ng-show
.
$scope.filterAreaList = [];
$scope.getAreaFilters = function () {
$scope.searchedIS = $scope.ISList.slice();
for (var i = $scope.searchedIS.length; i >= 0; i--) {
if ($scope.searched.IS.indexOf($scope.searchedIS[i]) === -1)
$scope.searchedIS.splice(i, 1);
}
for (var i = 0; i < $scope.areaList.length; i++) {
for (var j = 0; j < $scope.searchedIS.length; j++)
if ($scope.hasArea($scope.searchedIS[j], $scope.areaList[i]))
$scope.filterAreaList.push($scope.areaList[i]);
}
};
$scope.isInCurrentAreas = function (area) {
if ($scope.filterAreaList.indexOf(area) === -1)
return false;
return true;
};
其他一些主题指出了这一点:http://www.bennadel.com/blog/2443-rendering-dom-elements-with-ngrepeat-in-angularjs.htm
但我真的不知道如何将其应用到我的案例中。
好吧,我实际上错过了一些事情:
为了让它工作,我在我的 getAreaFilters()
函数中添加了:$scope.filterAreaList = [];
,我在我的 setAreaSearch(area)
中调用了 getAreaFilters()
就是这样。
我在这样的块中有一些复选框:
<div ng-show="searchIn.IS" class="filterContent">
<div ng-click="toggleFilter('IS')">
<span class="{{filters.IS}}FilterIcon"></span>
Information System :
</div>
<div ng-show="filters.IS">
<md-checkbox ng-repeat="IS in ISList" ng-click="setISSearch(IS)" ng-checked="isInISSearch(IS)">
{IS}}
</md-checkbox>
</div>
</div>
<br />
<div ng-show="searchIn.area" class="filterContent">
<div ng-click="toggleFilter('area')">
<span class="{{filters.area}}FilterIcon"></span>
Area :
</div>
<div ng-show="filters.area">
<md-checkbox ng-repeat="area in filterAreaList" ng-click="setAreaSearch(area)" ng-checked="isInAreaSearch(area)" ng-show="isInCurrentAreas(area)">
{{area}}
</md-checkbox>
</div>
</div>
因此,每次我选中或取消选中 ISList 块中的复选框时,filterAreaList
都会发生变化。但是视图没有更新,所有区域仍然显示。
我也试过 ng-if
而不是 ng-show
.
$scope.filterAreaList = [];
$scope.getAreaFilters = function () {
$scope.searchedIS = $scope.ISList.slice();
for (var i = $scope.searchedIS.length; i >= 0; i--) {
if ($scope.searched.IS.indexOf($scope.searchedIS[i]) === -1)
$scope.searchedIS.splice(i, 1);
}
for (var i = 0; i < $scope.areaList.length; i++) {
for (var j = 0; j < $scope.searchedIS.length; j++)
if ($scope.hasArea($scope.searchedIS[j], $scope.areaList[i]))
$scope.filterAreaList.push($scope.areaList[i]);
}
};
$scope.isInCurrentAreas = function (area) {
if ($scope.filterAreaList.indexOf(area) === -1)
return false;
return true;
};
其他一些主题指出了这一点:http://www.bennadel.com/blog/2443-rendering-dom-elements-with-ngrepeat-in-angularjs.htm
但我真的不知道如何将其应用到我的案例中。
好吧,我实际上错过了一些事情:
为了让它工作,我在我的 getAreaFilters()
函数中添加了:$scope.filterAreaList = [];
,我在我的 setAreaSearch(area)
getAreaFilters()
就是这样。