Samir Samir - 4 months ago 11
Javascript Question

angularjs ng-repeat dependent on another ng-repeat

I have an array (helper.makes) like so:

[0] => { make: 'BMW', models: ['3 series','5 series'] }
[1] => { make: 'Honda', models: ['Camry','Corolla'] }


In my select I want the user to select make and then the model select will update accordingly. Here is my code so far:

<label>
<p>Make</p>
<select ng-model="make">
<option ng-repeat="(key, value) in helper.makes | orderBy: 'name'">{{ value.name }}</option>
</select>
</label>
<label>
<p>Model</p>
<select ng-model="model">
<option ng-repeat="(key, value) in helper.getModelByMake(make) | orderBy: value">{{ value }}</option>
</select>
</label>


Before I simply used an associative array so I could do helper.makes[make] but that kept turning it into an object and angular refused to order it. Doing it this way I created the function getModelByMake which simply loops through the list of makes, finds the right one and returns it's models array.

The problem is, that does not seem to update as the person changes the make. I believe it is attempting to load once, seeing that no make is selected and returning blank results.

What method would be best for such an instance in AngularJS? Is there something awesome AngularJS can do here that I am unaware of?

Answer

You could use ng-change in the make option and create something like this:

<label>
  <p>Make</p>
  <select ng-model="make">
    <option ng-repeat="(key, value) in helper.makes | orderBy: 'name'" ng-change="getModelByMake()">{{ value.name }}</option>
  </select>
</label>
<label>
  <p>Model</p>
  <select ng-model="model">
    <option ng-repeat="(key, value) in helper.model | orderBy: value">{{ value }}</option>
  </select>
</label>

Then in your getModelByMake() function, you get the make ID and get the models.

Comments