0

I need to pre select default values for two dependent dropdowns. So on page load the dropdowns should show something like "Automative" with "Two wheelers" selected. (And not using selected attribute , the default values have to be loaded via $scope) Below is the Plunkr link for the working dropdowns.

http://plnkr.co/edit/3Xrpb4jBziWNZE9JVfts?p=preview

<select class="home_search_select" name="d1" ng-model="selectedd1" ng-options="cat.category_id as cat.category_name for cat  in categorydata track by cat.category_id" id="d1">
   <option value="">Select Category</option>
</select>

<select class="home_search_select" name="d2" id="d2" ng-disabled="!selectedd1" ng-model="selectedd2" ng-options="subcat.ID as subcat.Name for subcat in ((categorydata|filter:{'category_id':selectedd1})[0].Subcategory) track by subcat.ID">
  <option class="home_search_select" value="">Select Sub Category</option>
</select>
Vish
  • 1
  • 1

1 Answers1

0

Assign the value for selected1 as below

$scope.selectedd1= {
    "category_name": "Automotive",
    "category_id": "1",
    "Subcategory": [{
      "Name": "Two Wheeler",
      "ID": "1"
    }, {
      "Name": "Four Wheeler",
      "ID": "2"
    }, {
      "Name": "Heavy Moving Vehicles",
      "ID": "3"
    }, {
      "Name": "Automobile Related",
      "ID": "4"
    }]
  };

Modify the ng-options in the second dropdown

<select class="home_search_select" name="d2" id="d2"
    ng-disabled="!selectedd1" ng-model="selectedd2" 
    ng-options="subcat.ID as subcat.Name for subcat in selectedd1.Subcategory track by subcat.ID">
      <option class="home_search_select" value="">Select Sub Category</option>
 </select>

To listen the changes in the dropdown use ng-change directive

<select class="home_search_select" name="d1" 
ng-model="selectedd1" 
ng-change="homeChanged()"
ng-options="cat as cat.category_name for cat  in categorydata track by cat.category_id" id="d1">
  <option ng-value="">Select Category</option>
</select>

Note:ng-options is changed to contain the entire object

Updated Plunker

Aravind
  • 40,391
  • 16
  • 91
  • 110
  • Not working , Subcategory dropdown is empty and on change also its broken. I need it to be working as the original. – Vish Jul 15 '17 at 20:34
  • just add `$scope.selectedd2 = $scope.selectedd1.Subcategory[0];` (instead of `$scope.selectedd2 = "1";`) to @Aravind's answer and it should work – Andriy Jul 15 '17 at 20:48
  • @Andriy upvote if this works – Aravind Jul 15 '17 at 20:51
  • Not working again...Kindly go through my query again. I need two drop downs selected. Like "Automotive" with "Two Wheeler" , or "Fashion" with ''Footwear" to appear initially. And when i change again primary category, to anything it should populate subcategory with all matching values with "Select Subcategory" selected. – Vish Jul 15 '17 at 20:51
  • can you give me an example – Aravind Jul 15 '17 at 20:53
  • 1
    @Aravind, it does not work, It should work if you add to your code `$scope.selectedd2 = $scope.selectedd1.Subcategory[0];` Here is fixed plunker - http://plnkr.co/edit/MfThyBndm6zRLxmtqe7p?p=preview – Andriy Jul 15 '17 at 20:55
  • @Andriy Your solution worked ! thanks :) Could you post the comment as an answer , so that i can tick it. – Vish Jul 18 '17 at 04:26
  • thanks @Vish for you will to tick my answer, I think it is not possible now, since the question is marked as duplicate. I was and always am glad to help :) – Andriy Jul 18 '17 at 05:44