Show a by ng-repeat select option (AngularJS)

Question

I'm trying to make a select list with two or three options, which depends on the first selected option in a ng-repeat. When the customer selects in the first option "Dome Camera" there should be only list two options in the second ng-repeat based on the listed mounting items (in this case: roof, wall and pole).

Can somebody help me with this?

<tr>
  <td>
    <select class="form-control" name="type-camera">
      <option ng-repeat="camera in cameraTypes">{{camera.name}}</option>
    </select>
  </td>
  <td>
    <select class="form-control" name="type-camera">
      <option ng-repeat="mounting in ?????">{{mounting}}</option>
    </select>
  </td>
</tr>

The $scope.cameraTyps looks like:

"0": {
      "name": "Dome Camera",
      "price": 2975.67,
      "install": 4,
      "mounting": {
        "name": "roof",
        "name": "wall",
        "name": "pole"
      }
    },
    "1": {
      "name": "WV-SF135E",
      "price": 327.70,
      "install": 1.5,
      "mounting": {
        "name": "roof",
        "name": "wall"
      },
      "lens": "fixed"
    }

If any of these answers solved your question you can always mark it as accepted by checking the tick mark next to it — Robin-Hoodie, Jul 20 '16 at 11:01

score 0 · Answer 1 · edited May 23 '17 at 12:08

0

This should help you https://stackoverflow.com/a/22017098/1703519

Basically you add an ng-change function to the select box, and from there you can change the option list that the second select list is looking at dynamically.

Look at the fiddle from that answer to see a similar example (not exactly your scenario but close)

edited May 23 '17 at 12:08

Community

1
1

answered Jul 12 '16 at 19:56

labago

1,338
2
12
28

score 0 · Answer 2 · answered Jul 12 '16 at 20:13

So if I understand you correctly, you want to make the list of the second ng-repeat dependent on the selection of the selected option of the first list? That can easily be achieved by using ng-model with ng-change

<tr>
  <td>
    <select class="form-control" name="type-camera" ng-model="selectedCamera" ng-change="onChangeCamera();">
      <option ng-repeat="camera in cameraTypes">{{camera.name}}</option>
    </select>
  </td>
  <td>
    <select class="form-control" name="type-camera">
      <option ng-repeat="mounting in mountingList">{{mounting}}</option>
    </select>
  </td>
</tr>

In your controller:

$scope.onChangeCamera = function() {
  if($scope.selectedCamera.name === 'Dome Camera') {
    //For example
    $scope.mountingList = ['Roof', 'Wall', 'Pole'];
  }
}

score 0 · Accepted Answer · answered Jul 12 '16 at 22:59

First of all, your data structure is incorrect, I think your mounting object in fact is an array, so I changed it.

Point 1: I extremely recommend you to use ngOptions instead of ngRepeat. ngOptions was made exactly for <select> tag.

Point 2: You don't need to use ngChange directive or $watch as some people suggested, you just need to set the ngModel, then Angular can do the rest.

See it in action:

angular.module('app', [])
  .controller('mainCtrl', function($scope) {
    $scope.cameraTypes = [  
       {  
          "name":"Dome Camera",
          "price":2975.67,
          "install":4,
          "mounting":[  
             {  
                "name":"roof"
             },
             {  
                "name":"wall"
             },
             {  
                "name":"pole"
             }
          ]
       },
       {  
          "name":"WV-SF135E",
          "price":327.70,
          "install":1.5,
          "mounting":[  
             {  
                "name":"roof"
             },
             {  
                "name":"wall"
             }
          ],
          "lens":"fixed"
       }
    ];
  });

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <table>
    <tr>
      <td>
        <select class="form-control" name="camera-type" ng-options="camera.name for camera in cameraTypes" ng-model="camera">
          <option value="">Select a camera</option>
        </select>
      </td>
      <td ng-if="camera">
        <select class="form-control" name="mounting-type" ng-options="m.name for m in camera.mounting" ng-model="mounting">
          <option value="">Select a mounting</option>
        </select>
      </td>
    </tr>
  </table>
</body>

</html>

Show a by ng-repeat select option (AngularJS)

3 Answers3