Marco Pereira Marco Pereira - 5 months ago 24
AngularJS Question

Track by index doesnt reset after changing selection

i have a cascading select option, and is working well, the problem is that when i change the first selected option, in the second selection option (subcategory), it keeps the index. So case i change the category (first select), in the second selection it goes to the option position that it was.

For better understanding, please check this example i made and try changin the options. You will notice that in the second selec option keeps the position index that had in the previous category selected. It doesnt starts to 0 when changing the category.

Link: http://jsfiddle.net/Fqfg3/28/

Js:

var app = angular.module('app', []);

app.controller('PeopleCtrl', function ($http,$scope) {
vm = this;

vm.options = [
{
"_id": "1",
"label": "Category 1",
"childs": [
"Category 1 -> Subcategory 1",
"Category 1 -> Subcategory 2",
"others"
]
},
{
"_id": "2",
"label": "Category 2",
"childs": [
"Category 2 -> Subcategory 1",
"Category 2 -> Subcategory 2",
"others"
]
},
{
"_id": "3",
"label": "Category 3",
"childs": [
"Category 3 -> Subcategory 1",
"Category 3 -> Subcategory 2",
"others"
]
}];


});


html:

<div ng-app="app" ng-controller="PeopleCtrl as ctrl" class="container">
{{ctrl.options}}

<div class="form-group question-wrapper">
<select class="form-control"
name="category"
ng-options="option.label for option in ctrl.options track by option._id"
ng-model="ctrl.supportMail.selected">
</select>

</div>

<div class="form-group question-wrapper">
<select id="sub" class="form-control"
name="subcategory"

>
<option ng-repeat="child in ctrl.supportMail.selected.childs track by $index">{{child}}</option>

</select>
</div>
</div>

Answer

You can use ng-change in main select to reset the subselect to default.

Here's is a demonstration working:

(function() {
"use strict";
  angular.module('app', [])
    .controller('mainCtrl', function() {
      var vm = this;

      vm.options = [  
         {  
            "_id":"1",
            "label":"Category 1",
            "childs":[  
               "Category 1 -> Subcategory 1",
               "Category 1 -> Subcategory 2",
               "others"
            ]
         },
         {  
            "_id":"2",
            "label":"Category 2",
            "childs":[  
               "Category 2 -> Subcategory 1",
               "Category 2 -> Subcategory 2",
               "others"
            ]
         },
         {  
            "_id":"3",
            "label":"Category 3",
            "childs":[  
               "Category 3 -> Subcategory 1",
               "Category 3 -> Subcategory 2",
               "others"
            ]
         }
      ];

      vm.reset_subSelect = function() {
        vm.supportMail.child = vm.supportMail.selected.childs[0];
      }
    });
})();
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl as ctrl">
  <div class="container">
    <div class="form-group question-wrapper">
      <select class="form-control" name="category" ng-options="option.label for option in ctrl.options track by option._id" ng-model="ctrl.supportMail.selected" ng-change="ctrl.reset_subSelect()" ng-init="ctrl.supportMail.selected = ctrl.options[0]">
      </select>
    </div>
    <div class="form-group question-wrapper">
      <select class="form-control" id="sub" name="subcategory" ng-options="child for child in ctrl.supportMail.selected.childs" ng-model="ctrl.supportMail.child" ng-init="ctrl.supportMail.child = ctrl.supportMail.selected.childs[0]">
      </select>
    </div>
  </div>
</body>

</html>

I hope it helps.