根据选定的主要类别过滤选择类别(angularJS)

时间:2016-01-13 08:34:52

标签: javascript html angularjs

我想知道是否可以根据我当前代码中的第一个选定类别过滤类别选择器以及如何达到预期效果。

这是我的控制器,提供所有类别

controllers.addItemCtrl = function($scope, productsFactory, sessionFactory, categoriesFactory, $http, $location){
    sessionFactory.isLoggedIn().then(function(data){
        var loggedIn = data.logged_in;
        if(loggedIn){
            categoriesFactory.getCategoriesList().success(function(data){
                console.log(data);
                $scope.categories = data;
            });
        } else {
            window.location.href="/#/login";
        }
    });
}

这是我对类别的回应

[{"id_category":"1","category":"Audio, video & photo","parent":"0","alias":"audio-video-and-photo","image":"" ....etc}]

这是我的HTML

<div class="form-group">
    <label for="category">
        <i class="icon-user"></i><b>Category</b>
    </label><br>

    <select name="category" id="category">
        <option ng-repeat="c in categories track by $index" 
                ng-if="c.parent == 0" 
                value="{{c.id_category}}">{{c.category}}</option>
    </select>

    <span ng-class="{'submissionMessage' : errorDescription}" 
          ng-bind="errorDescription">
    </span>
</div>

<div class="form-group">
    <label for="subCategory">
        <i class="icon-user"></i><b>Sub category</b>
    </label><br>

    <select name="subCategory" id="subCategory">
        <option ng-repeat="c in categories track by $index" 
                ng-if="c.parent > 0" value="{{c.id_category}}">
            {{c.category}}
        </option>
    </select>

    <span ng-class="{'submissionMessage' : errorDescription}" 
          ng-bind="errorDescription"></span>
</div>

如何制作过滤器,假设我选择主要类别音频,视频和放大器id为1的照片,然后我想在另一个选择器中只显示父ID为1的类别

如果您需要任何其他信息,请告诉我,我会提供。

1 个答案:

答案 0 :(得分:1)

HTML

<div ng-app="myApp" ng-controller="myCtrl">

        <div class="form-group">
          <label for="category"><i class="icon-user"></i><b>Category</b></label><br>

          <select name="category" id="category" ng-change='searchSubCategory(parentCat)' ng-model='parentCat'>
            <option ng-repeat="c in categories track by $index" ng-if="c.parent == 0" value="{{c.id_category}}">
              {{c.category}}
            </option>
          </select>

          <span ng-class="{'submissionMessage' : errorDescription}" ng-bind="errorDescription"></span>
        </div>


        <div class="form-group">
          <label for="subCategory"><i class="icon-user"></i><b>Sub category</b></label><br>

          <select name="subCategory" id="subCategory">
            <option ng-repeat="c in subcategory track by $index" ng-if="c.parent > 0" value="{{c.id_category}}">
            {{c.category}}
            </option>
          </select>

          <span ng-class="{'submissionMessage' : errorDescription}" ng-bind="errorDescription"></span>
        </div>

      </div>

Javascript Logic

.controller('myCtrl', function($scope) 
{
    $scope.categories = [{"id_category":"1","category":"Audio, video & photo","parent":"0","alias":"audio-video-and-photo","image":""},{"id_category":"2","category":"Music players","parent":"1","alias":"music-players","image":""},{"id_category":"3","category":"Musical instruments","parent":"1","alias":"musical-instruments","image":""},{"id_category":"4","category":"Music accessories","parent":"1","alias":"music-accessories","image":""},{"id_category":"5","category":"Hi-Fi","parent":"1","alias":"hi-fi","image":""},{"id_category":"6","category":"Home cinema","parent":"1","alias":"home-cinema","image":""},{"id_category":"7","category":"TV's","parent":"1","alias":"tv","image":""},{"id_category":"8","category":"Rest","parent":"1","alias":"rest","image":""},{"id_category":"9","category":"Cars & bikes","parent":"0","alias":"cars-and-bikes","image":""},{"id_category":"10","category":"Whole cars","parent":"9","alias":"whole-cars","image":""},{"id_category":"11","category":"Bikes","parent":"9","alias":"bikes","image":""},{"id_category":"12","category":"Car parts","parent":"9","alias":"car-parts","image":""},{"id_category":"13","category":"Auto acoustics","parent":"9","alias":"auto-acoustics","image":""},{"id_category":"14","category":"Mobile homes, trailers and equipment","parent":"9","alias":"mobile-homes-trailers-and-equipment","image":""},{"id_category":"15","category":"Tires","parent":"9","alias":"tires","image":""},{"id_category":"16","category":"Rims","parent":"9","alias":"rims","image":""},{"id_category":"17","category":"Car accessories","parent":"9","alias":"car-accessories","image":""},{"id_category":"18","category":"Home and garden","parent":"0","alias":"home-and-garden","image":""},{"id_category":"19","category":"Construction and installation","parent":"18","alias":"construction-and-installation","image":""},{"id_category":"20","category":"Refrigerators & Freezers","parent":"18","alias":"refrigerators-and-freezers","image":""},{"id_category":"21","category":"Cooking and kitchen utensils","parent":"18","alias":"cooking-and-kitchen-utensils","image":""},{"id_category":"22","category":"Home equipment","parent":"18","alias":"home-equipment","image":""},{"id_category":"23","category":"Tools and machines","parent":"18","alias":"tools-and-machines","image":""},{"id_category":"24","category":"furniture","parent":"18","alias":"furniture","image":""},{"id_category":"25","category":"cleaning and washing machines","parent":"18","alias":"cleaning-and-washing-machines","image":""},{"id_category":"26","category":"Garden and working equipment","parent":"18","alias":"garden-and-working-equipment","image":""},{"id_category":"27","category":"Pets and accessories","parent":"18","alias":"pets-and-accessories","image":""},{"id_category":"28","category":"Camera","parent":"1","alias":"camera","image":""},{"id_category":"29","category":"Beauty and health","parent":"0","alias":"0","image":""},{"id_category":"30","category":"Personal care appliances","parent":"29","alias":"personal-care-appliances","image":""},{"id_category":"31","category":"Appliances for health","parent":"29","alias":"appliances-for-health","image":""},{"id_category":"32","category":"Cosmetics and hygiene","parent":"29","alias":"cosmetics-and-hygiene","image":""},{"id_category":"33","category":"Makeup","parent":"29","alias":"makeup","image":""},{"id_category":"34","category":"Jewellery","parent":"29","alias":"jewellery","image":""},{"id_category":"35","category":"Glasses","parent":"29","alias":"glasses","image":""},{"id_category":"36","category":"Perfumes","parent":"29","alias":"perfumes","image":""},{"id_category":"37","category":"Rest","parent":"18","alias":"rest","image":""},{"id_category":"38","category":"Rest","parent":"9","alias":"rest","image":""},{"id_category":"39","category":"Hand watches","parent":"29","alias":"hand-watches","image":""},{"id_category":"40","category":"Clothing","parent":"0","alias":"clothing","image":""},{"id_category":"41","category":"Women's clothing","parent":"40","alias":"womens-clothing","image":""},{"id_category":"42","category":"Men's clothing","parent":"40","alias":"mens-clothing","image":""},{"id_category":"43","category":"Kid's clothing","parent":"40","alias":"kids-clothing","image":""},{"id_category":"44","category":"Fashion accessories","parent":"40","alias":"fashion-accessories","image":""},{"id_category":"45","category":"Rest","parent":"40","alias":"rest","image":""},{"id_category":"46","category":"Books and literature","parent":"82","alias":"books-and-literature","image":""},{"id_category":"47","category":"Office equipment","parent":"82","alias":"office-equipment","image":""},{"id_category":"48","category":"Office Furniture","parent":"82","alias":"office-furniture","image":""},{"id_category":"49","category":"School","parent":"82","alias":"school","image":""},{"id_category":"50","category":"Rest","parent":"82","alias":"rest","image":""},{"id_category":"51","category":"Computers","parent":"0","alias":"computers","image":""},{"id_category":"52","category":"Laptops","parent":"51","alias":"laptops","image":""},{"id_category":"53","category":"Stationary computer","parent":"51","alias":"stationary-computer","image":""},{"id_category":"54","category":"Tablets","parent":"51","alias":"tablets","image":""},{"id_category":"55","category":"Computer components","parent":"51","alias":"computer-components","image":""},{"id_category":"56","category":"Computer equipment","parent":"51","alias":"computer-equipment","image":""},{"id_category":"57","category":"Network","parent":"51","alias":"network","image":""},{"id_category":"58","category":"Printers & scanners","parent":"51","alias":"printers-and-scanners","image":""},{"id_category":"59","category":"Cartridges and toners","parent":"51","alias":"cartridges-and-toners","image":""},{"id_category":"60","category":"Rest","parent":"51","alias":"rest","image":""},{"id_category":"61","category":"Sport","parent":"0","alias":"sport","image":""},{"id_category":"62","category":"Outdoor & camping","parent":"61","alias":"outdoor-and-camping","image":""},{"id_category":"63","category":"Modelling","parent":"61","alias":"modelling","image":""},{"id_category":"64","category":"Racquet Sports","parent":"61","alias":"racquet-sports","image":""},{"id_category":"65","category":"Cycling","parent":"61","alias":"cycling","image":""},{"id_category":"66","category":"Fitness & aerobics","parent":"61","alias":"Fitness-and-aerobics","image":""},{"id_category":"67","category":"Hiking & climbing","parent":"61","alias":"Hiking-and-climbing","image":""},{"id_category":"68","category":"Skiing","parent":"61","alias":"skiing","image":""},{"id_category":"69","category":"GPS, watches and gauges","parent":"61","alias":"Gps-watches-and-gauges","image":""},{"id_category":"70","category":"Rest","parent":"61","alias":"rest","image":""},{"id_category":"71","category":"Phones","parent":"0","alias":"phones","image":""},{"id_category":"72","category":"Gsm","parent":"71","alias":"gsm","image":""},{"id_category":"73","category":"Gsm accessories","parent":"71","alias":"gsm-accessories","image":""},{"id_category":"74","category":"Rest","parent":"71","alias":"rest","image":""},{"id_category":"75","category":"Kids","parent":"0","alias":"kids","image":""},{"id_category":"76","category":"Car seats","parent":"75","alias":"car-seats","image":""},{"id_category":"77","category":"Prams","parent":"75","alias":"prams","image":""},{"id_category":"78","category":"Baby equipment and accessories","parent":"75","alias":"Baby-equipment-and-accessories","image":""},{"id_category":"79","category":"Toys","parent":"75","alias":"toys","image":""},{"id_category":"80","category":"Children's playgrounds","parent":"75","alias":"childrens-playground","image":""},{"id_category":"81","category":"Rest","parent":"29","alias":"rest","image":""},{"id_category":"82","category":"Books & Office material","parent":"0","alias":"books-and-office-material","image":""},{"id_category":"83","category":"Rest","parent":"75","alias":"rest","image":""},{"id_category":"84","category":"Bike accessories","parent":"9","alias":"bike-accessories","image":""}];

    $scope.searchSubCategory = function(parentCat)
    {   
        $scope.subcategory = [];
        for(i=0;i<$scope.categories.length;i++)
        {   
            if(parentCat==$scope.categories[i].parent)
            {
                $scope.subcategory.push($scope.categories[i])
            }
        }
    }
});

在选择索引更改时创建简单函数并执行一些小逻辑