Question

我有两个控制器

buildersCtrl ---＆gt; listpagefilter.html
filtersCtrl ----＆gt; filter.html

观点：

所以我的页面路由就像这样

sidemenu.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
        $routeProvider
                .when('/builders/:id', {
                    templateUrl: '../template/listpagefilter.html',
                    controller: 'buildersCtrl'
                })
});

到目前为止一切正常，但是当我点击基于该URL的方框（1bhk或2bhk）上的复选框时，我的问题必须生成例如，我点击过滤器控制器中的1 bhk复选框它必须生成这样的网址：

my requirement :
 checked on check boxes:

 1st page url:ip:port/#/builders/1 
  clicked on check box 1bhk: url:ip:port/#/builders/1/?bedrooms=0
  and clicked on check box 2bhk: url:ip:port/#/builders/1/?bedrooms=0,1

un checked on check boxes:
 1st page url:ip:port/#/builders/1 
  unchecked only in check box 1bhk: url:ip:port/#/builders/1/bedrooms=1

我的过滤器控制器代码：

 sidemenu.controller('filtersCtrl',['$scope','$rootScope','allServices','$window','$routeParams','$location',function (a,b,e,w,r,l) {


    a.unitnames = [{
        id:0,name: "1 BHK",selected:false
    },{
        id:1,name: "2 BHK",selected:false
    }, {
        id:2,name: "3 BHK",selected:false
    }, {
        id:3,name: "4 BHK",selected:false
    }];


    a.OnItemClick=function (bedroom) {

    if(bedroom.id==0){
        alert(bedroom.selected);
        l.path("/builders/"+r.id).search({bedrooms:bedroom.id})

    }
}

}]);

我的过滤器html页面代码：

<li uib-dropdown>
                            <a uib-dropdown-toggle>BHK<span class="caret"></span></a>
                            <ul uib-dropdown-menu>
                                <li ng-repeat="unitType in unitnames" >
                                    <label class="control control--checkbox" ng-click="OnItemClick(unitType)">
                                        {{unitType.name}}
                                        <input type="checkbox" ng-model="unitType.selected">
                                        <div class="control__indicator"></div>
                                    </label>
                                </li>
                            </ul>
                        </li>

根据如何更改网址（动态添加或删除）选中/取消选中我的问题

可能是我的问题可以像这样解决

<li class="checkboxInfo ng-scope" data-ng-repeat="option in filter.options" data-ng-class="{'active': option.selected || option.selectedFromUrl, 'disable':option.disabled || option.disabledFromUrl}" data-ng-click="filterChanged(option, $event)">

Answer 1

只需在选中或取消选中时添加和删除卧室ID。

var bedroomsIds = [];
a.OnItemClick=function (bedroom) {

 if(bedroomsIds.indexOf(bedroom) < 0){
  bedroomsIds.push(bedroom)
}
else{
    bedroomsIds.splice(bedroomsIds.indexOf(bedroom), 1);
    }
    l.path("/builders/"+r.id).search({bedrooms:bedroomsIds.join(", ")})

}

基于angularjs中具有不同路由但相同控制器和相同页面的复选框过滤服务？

1 个答案: