0

How can I display two dropdown menus with the proper options using angular's ng-repeat directive?

Here's a JSBin

js:

 angular.module('myApp', [])
    .controller('MainCtrl', function($scope) {

      $scope.templates = {
        pages: ['home', 'about'],
        posts: ['blog', 'lab']

      };

    });

HTML:

 <div class="container" ng-controller="MainCtrl">
    <form action="" class="col-lg-12" >
       <select class="form-control" ng-repeat="template in templates.pages>
        <option value = "{{ template }}"> {{ template }}</option>
      </select>
      <select class="form-control" ng-repeat="template in templates.posts>
        <option value = "{{ template }}"> {{ template }}</option>
      </select> 
    </form>

  </div>
Armeen Moon
  • 18,061
  • 35
  • 120
  • 233

1 Answers1

0

ng-repeat should be used in option tags. Also, close double quotes in your ng-repeat expression.

Here your fixed JSBin

Andrew Shustariov
  • 2,530
  • 1
  • 17
  • 17