CODEWITHSUNDEEP
javascriptangularjs
chrislhardin
chrislhardin

Reputation: 1745

Angular driving one Select from another. Second select showing only a single result

I have the code below and I am attempting to drive one select box from another but the subcategory select only shows one item at a time and it should show every item that has the parent category. For example, if Truck is selected in Category, Subcategory should show Telescope and Hazmat and If I choose Van, then subcategory would only have mini. What the heck am I doing wrong here?

        <select name="Category" ng-model="selectedCategory" 
           ng-options="item.id as item.name for item in categories | unique:'name' | orderBy:'name'" ng-change="">
          <option value="" disabled selected>All Categories</option>
        </select>


        <select name="SubCategory"  ng-model="selectedSubCategory" ng-options="item.id as item.subCategory for item in categories | filter:selectedCategory | orderBy:'subCategory'" >
          <option value="" disabled selected>All SubCategories</option>
        </select>



 $scope.selectedCategory = null;
      $scope.categories = [];
      $scope.$watch('selectedCategory', function() {
                $scope.selectedSubCategory = null;
              });



      $http({
        method: 'GET',
        url: 'test.php?option=com_ajax&type=Category&format=json',
        data: { }
    }).success(function (result) {
       $scope.categories = result;

    });

...

  {
    "id": "1",
    "name": "Truck",
    "subCategory": "Telescope"
    },
    {
    "id": "2",
    "name": "Truck",
    "subCategory": "Hazmat"
    },
    {
    "id": "3",
    "name": "Van",
    "subCategory": "Mini"
    }

Upvotes: 0

Views: 161

Answers (1)

guru
guru

Reputation: 4022

Looking into the code I guess the ngModel selectedCategory will have the item.id and id is unique for all the items but you want to filter by item.name in the subcatagories

So one way will be to modify the parent select as below,

        <select name="Category" ng-model="selectedCategory" 
           ng-options="item.name as item.name for item in categories">
          <option value="">All Categories</option>
        </select>

Sample Demo: http://plnkr.co/edit/E45B50eFmxRaep5WiWKW?p=preview

Upvotes: 1

Related Questions