在嵌套输入类型中使用ngOptions和/或ngRepeat选择

Question

I am trying to create an input type select , based off of the data grabbed from the db/json file . The issue I am having is that I am able to the Make part of the select, but all the other sections are not getting updated when I am selecting an item.

Please Help Me.

Below is a screenshot of what I am trying to achieve:

HTML Markup:

<select required  ng-change="onCarChange(b,car)" ng-model="reportData.car.make" ng-options="bb.make for bb in cars" class="form-control" >
     <option value="">--Select--</option>
</select> 

<select required ng-model="reportData.car.model" ng-change="onModelChange(b,model)" ng-options="cha.model.name for cha in b.selectedModels" class="form-control" >
     <option value="">--Select--</option>
</select>

<select required ng-model="reportData.car.year" ng-change="onYearChange(b,year)" ng-options="t for t in b.selectedYears" class="form-control" >
    <option value="">--Select--</option>
</select>

<select required ng-model="reportData.car.color" ng-change="onColorChange(b,color)" ng-options="t for t in b.selectedColors" class="form-control" >
    <option value="">--Select--</option>
</select>

APP.JS Controller

  $scope.onCarChange=function(b,car){
    b.selectedModels=car.model;
  }
  $scope.onModelChange=function(b,model){
    b.selectedModel=model;
    b.selectedYears=model.years;

  }
  $scope.onYearChange=function(b,year){
    b.selectedYear=year;
    b.selectedColor=years.colors;

  }
$scope.onColorChange=function(b,color){
    b.selectedColor=color;

  }

Sample Data

    $scope.cars = [
  {
    "model": [
      {
        "year": [
          "2016",
          "2015",
          "2014"
        ],
        "name": "CTS",
        "color": [
          {"id":1, "hexvalue":"#000", "description":"Black"},
          {"id":2, "hexvalue":"#fff", "description":"White"},
          {"id":3, "hexvalue":"#FAF0BE", "description":"Blonde"},
          {"id":4, "hexvalue":"#0000FF", "description":"Blue"},
          {"id":5, "hexvalue":"#808080", "description":"Grey"}
        ],
        "id": 0
      },
      {
        "year": [
          "2016",
          "2015",
          "2014",
          "2013",
          "2012"
        ],
        "name": "ATS",
        "color": [
          {"id":1, "hexvalue":"#000", "description":"Black"},
          {"id":2, "hexvalue":"#fff", "description":"White"},
          {"id":3, "hexvalue":"#FAF0BE", "description":"Blonde"},
          {"id":4, "hexvalue":"#0000FF", "description":"Blue"},
          {"id":5, "hexvalue":"#808080", "description":"Grey"}
        ],
        "id": 1
      },
      {
        "year": [
          "2016",
          "2015",
          "2014"
        ],
        "name": "XTS",
        "color": [
          {"id":1, "hexvalue":"#000", "description":"Black"},
          {"id":2, "hexvalue":"#fff", "description":"White"},
          {"id":3, "hexvalue":"#FAF0BE", "description":"Blonde"},
          {"id":4, "hexvalue":"#0000FF", "description":"Blue"}
        ],
        "id": 2
      }
    ],
    "make": "CADILLAC",
    "picture": "http://placehold.it/32x32",
    "index": 0,
    "_id": "573bef46573891a64081d4d6"
  }
}
]

Answer 1

The b you are referring to should be inside the $scope so it can be updated correctly on the html. Use $scope.b insted of b, just like you did with $scope.cars.

If you want a more clean code, remove the b and use $scope.selectedModel instead of $scope.b.selectedModel, and inside ng-options selectedModel instead of b.selectedModel.

Answer 2

Please modify as below :

     $scope.onCarChange=function(b,car){
        $scope.b.selectedModels=car.model;
      }
      $scope.onModelChange=function(b,model){
        $scope.b.selectedModel=model;
        $scope.b.selectedYears=model.years;

      }
      $scope.onYearChange=function(b,year){
        $scope.b.selectedYear=year;
        $scope.b.selectedColor=years.colors;

      }
    $scope.onColorChange=function(b,color){
        $scope.b.selectedColor=color;

      }

Also one suggestion, you dont need to call ng-change to reflect the same. Consider below example

Html code : first: {{ firstSelection }} second: {{ secondSelection }}

Js code:

var myapp = angular.module('myapp', []);
myapp.controller('myCtrl', function ($scope) {
    $scope.a = [1,2,3];
    $scope.b = {
        1:[1,2],
        2:[2,4],
        3:[3,6]
    };
    $scope.firstSelection = 2;
    $scope.secondSelection = 4;
});

Answer 3

Here is entire modifed code for your issue without ng-change:

Html code :

<div ng-app="myapp">
    <fieldset ng-controller="myCtrl">

<select required  ng-model="reportData.car.make" ng-options="item for item in c" class="form-control" >
     <option value="">--Select--</option>
</select> 

<select required ng-model="selectedmodel" ng-options="source.name for source in sourceList" class="form-control" >
     <option value="">--Select--</option>
</select>

<select required ng-model="selectedYear" ng-options="item for item in selectedmodel.suboptions.yearList" class="form-control" >
    <option value="">--Select--</option>
</select>

<select required ng-model="selectedColor" ng-options="t.description for t in selectedmodel.suboptions.color" class="form-control" >
    <option value="">--Select--</option>
</select>

    </fieldset>
</div>

JS code:

var myapp = angular.module('myapp', []);
myapp.controller('myCtrl', function ($scope) {


    $scope.c =['CADILLAC','CAR2'];
    $scope.models =['CTS','ATS'];
    $scope.sourceList = [
    {
       name: "CTS",
       suboptions: 
           { "yearList": [
          "2016",
          "2015",
          "2014"
        ],
        "color": [
          {"id":1, "hexvalue":"#000", "description":"Black"},
          {"id":2, "hexvalue":"#fff", "description":"White"},
          {"id":3, "hexvalue":"#FAF0BE", "description":"Blonde"},
          {"id":4, "hexvalue":"#0000FF", "description":"Blue"},
          {"id":5, "hexvalue":"#808080", "description":"Grey"}
        ]}       
    },
    {
    name: "ATS",
       suboptions: 
           { "yearList": [
          "2016",
          "2015",
          "2014"
        ],
        "color": [
          {"id":1, "hexvalue":"#000", "description":"Black"},
          {"id":2, "hexvalue":"#fff", "description":"White"},
          {"id":3, "hexvalue":"#FAF0BE", "description":"Blonde"},
          {"id":4, "hexvalue":"#0000FF", "description":"Blue"},
          {"id":5, "hexvalue":"#808080", "description":"Grey"}
        ]}
    }

];
});

Let me know if with above code also you are facing issue or not

Answer 4

I made this fiddle from your code. I used ng-model values as parameters.

checkout this fiddle: https://jsfiddle.net/vh16yx5s/

HTML Code

    <div ng-app='test'>
  <div ng-controller="testCtrl">
    <select required ng-change="onCarChange(reportData.car)" ng-model="reportData.car" ng-options="bb.make for bb in cars" class="form-control">
      <option value="">--Select--</option>
    </select>

    <select required ng-model="reportData.car.model" ng-change="onModelChange(reportData.car.model)" ng-options="cha.name for cha in b.selectedModels" class="form-control">
      <option value="">--Select--</option>
    </select>

    <select required ng-model="reportData.car.year" ng-change="onYearChange(b,year)" ng-options="t for t in b.selectedYears" class="form-control">
      <option value="">--Select--</option>
    </select>

    <select required ng-model="reportData.car.color" ng-change="onColorChange(b,color)" ng-options="t.description for t in b.selectedColors" class="form-control">
      <option value="">--Select--</option>
    </select>
  </div>
</div>

AngularJS code

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

test.controller('testCtrl', function testCtrl($scope) {

   console.log('initiated');

   $scope.cars = [{
       "model": [{
         "year": ["2016","2015","2014"],
         "name": "CTS",
         "color": [{"id": 1, "hexvalue": "#000", "description": "Black" }, 
                             {"id": 2, "hexvalue": "#fff", "description": "White" },
                   {"id": 3, "hexvalue": "#FAF0BE", "description": "Blonde"},
                   {"id": 4, "hexvalue": "#0000FF", "description": "Blue"},
                   {"id": 5, "hexvalue": "#808080", "description": "Grey"}],
         "id": 0
       }, {
         "year": [
           "2016",
           "2015",
           "2014",
           "2013",
           "2012"
         ],
         "name": "ATS",
         "color": [{
           "id": 1,
           "hexvalue": "#000",
           "description": "Black"
         }, {
           "id": 2,
           "hexvalue": "#fff",
           "description": "White"
         }, {
           "id": 3,
           "hexvalue": "#FAF0BE",
           "description": "Blonde"
         }, {
           "id": 4,
           "hexvalue": "#0000FF",
           "description": "Blue"
         }, {
           "id": 5,
           "hexvalue": "#808080",
           "description": "Grey"
         }],
         "id": 1
       }, {
         "year": [
           "2016",
           "2015",
           "2014"
         ],
         "name": "XTS",
         "color": [{
           "id": 1,
           "hexvalue": "#000",
           "description": "Black"
         }, {
           "id": 2,
           "hexvalue": "#fff",
           "description": "White"
         }, {
           "id": 3,
           "hexvalue": "#FAF0BE",
           "description": "Blonde"
         }, {
           "id": 4,
           "hexvalue": "#0000FF",
           "description": "Blue"
         }],
         "id": 2
       }],
       "make": "CADILLAC",
       "picture": "http://placehold.it/32x32",
       "index": 0,
       "_id": "573bef46573891a64081d4d6"
     }
   ];

   $scope.b = {};

   $scope.onCarChange = function(car) {
     console.log(car);
     $scope.b.selectedModels = car.model;
   }

   $scope.onModelChange = function(model) {
   console.log(model);
     $scope.b.selectedModel = model;
     $scope.b.selectedYears = model.year;
     $scope.b.selectedColors = model.color;
   }

   $scope.onYearChange = function(b, year) {
     $scope.b.selectedYear = year;
     $scope.b.selectedColor = years.colors;
   }

   $scope.onColorChange = function(b, color) {
     $scope.b.selectedColor = color;
   }

 });