如何在angularjs中动态生成ng-option

Question

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

Answer 1

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> 

Answer 2

As for mu understanding of the question you can create a custom filter to filter out options based on the quantity.

 angular.module("app",[]) .controller("ctrl",function($scope){ $scope.obj = { "list": [ { "quantity": [ 2, 3, 4 ]} ]} }) .filter('cust',function(){ return function(item){ var arr = [] for(var i =1; i<= parseInt(item); i++){ arr.push(i) } return arr } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <div ng-repeat="q in obj.list"> <div ng-repeat="i in q.quantity"> <select ng-init="q.selectval[i] = i" class="classname" ng-model="q.selectval[i]" ng-options="value as value for (key,value) in i | cust" > </select> {{q.selectval[i]}} </div> </div> </div>