在我的页面上,我有品牌A和品牌B.通过点击一个,我会显示一个已过滤的地址类型列表,然后点击其中一个,然后过滤位置。
当我点击品牌A时,我会保存已检查项目的对象并用品牌B的列表覆盖。当我点击返回品牌A时,位置列表会被正确过滤,但地址类型不会被检查,即使它们存在于数组中。
仅供参考,md-checkbox是Angular Material复选框。
这是我的HTML:
<ul >
<li id="brandA" ng-click="setBrand(0)" ng-class="{'brandSelected': brand == 0}">
</span>Brand A</span>
</li>
<li id="brandB" ng-click="setBrand(1)" ng-class="{'brandSelected': brand == 1}">
</span>Brand B</span>
</li>
</ul>
<div ng-repeat="item in addressTypes | filter : filterAddressTypeByBrand">
<md-checkbox class="md-primary" ng-checked="exists(item)" ng-click="toggle(item)" ng-model="item.selected">
{{ item.desc }}
</md-checkbox>
</div>
这是我的控制器的摘录:
$scope.addressTypesSelected = [];
$scope.addressTypesSelectedBrandA = [];
$scope.addressTypesSelectedBrandB = [];
$scope.toggle = function (item) {
var idx = $scope.addressTypesSelected.indexOf(item);
if (idx > -1) $scope.addressTypesSelected.splice(idx, 1);
else $scope.addressTypesSelected.push(item);
};
$scope.exists = function (item) {
return $scope.addressTypesSelected.indexOf(item) > -1;
};
$scope.setBrand = function (val) {
$scope.brand = val;
$scope.addressTypesSelected = [];
if ($scope.brand == 1) {
$scope.addressTypesSelectedBrandB = [];
$scope.addressTypesSelectedBrandB = angular.copy($scope.addressTypesSelected);
$scope.addressTypesSelected = angular.copy($scope.addressTypesSelectedBrandA);
} else {
$scope.addressTypesSelectedBrandA = [];
$scope.addressTypesSelectedBrandA = angular.copy($scope.addressTypesSelected);
$scope.addressTypesSelected = angular.copy($scope.addressTypesSelectedBrandB);
}
$scope.filterDealers($scope.dealers);
}
在品牌之间切换时,需要做些什么来检查复选框?
更新1。
我已将ng-model =“item.selected”添加到md-checkbox。这似乎可以解决问题。但是,如果我选中品牌A上的一个方框,然后点击品牌B,然后点击品牌A,复选框仍保持选中状态。如果我继续并单击品牌B,然后再次单击品牌A,则取消选中该复选框,但模型中的值设置为true。