Search code examples
javascripthtmlangularjsjsonng-options

How to dynamically generate ng-option in angularjs


Here, from the json it will show the quantity. Based on quantity value, select option needs to generate dynamically as below.


Solution

  • you can use limitTo with ng-options to dynamically show options of select element

    Wish I have got what you want.

    angular.module("app", []).controller("myCtrl", function($scope) {
      $scope.selectedItem = 1;
      $scope.list = [1, 2, 3, 4];
      $scope.quantity = 1;
    });
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="app" ng-controller="myCtrl">
      <select ng-model="quantity" ng-options="value as value for value in list"></select>
      <br>
      <select class="classname" ng-options="value as value for value in list | limitTo:quantity:0" ng-model="selectedItem">
        <!--<option ng-repeat="item in list | limitTo:quantity:0">{{item}}</option> -->
      </select>
      {{selectedItem}}
    </div>