Here, from the json it will show the quantity. Based on quantity value, select option needs to generate dynamically as below.
0
Add a comment
|
2 Answers
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>1 Comment
Pengyy
@UI_Dev since
limitTo is normal build in filter, so change the ng-repeat to ng-options. hopes it will make some close to your question.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>4 Comments
UI_Dev
Thanks sachila for your time. Is there any way to pre-select first value of dropdown by using ng-selected
Sachila Ranawaka
@UI_Dev check the demo again
UI_Dev
is there any way to use that filter inside controller?
Sachila Ranawaka
@UI_Dev check this example jaliyaudagedara.blogspot.com/2015/07/…