SVK SVK - 1 month ago 5
AngularJS Question

How to get dropdown value(Range of array count)?

I am trying to create a select element that has a list of numbers 1 to array total count. how to structure the ng-options expression so that it will give me the numbers I need?

<select ng-model="page" ng-options="???"></select>


what do I need to put in the ng-options expression in order for it to create my select like

<select>
<option value="1">1</option>
...
<option value="array length">array length</option>
</select>


JS code:

$scope.arrayName=
{
"ABC": [{
"id": "a33e777fdc444222bfa7fab2baec17a0",
"name": "music & store",
"isDeletionAllowed": false,
"isDeleted": false,
"isEnabled": false,
"language": "en"
}, {
"id": "9896710e6ac6454c96ec29e9a83355e4",
"name": "music class",
"isDeletionAllowed": false,
"isDeleted": false,
"isEnabled": false,
"language": "en"
}, {
"id": "b65ab7e3fdc24e23851ffb2e940ff00f",
"name": "music store",
"isDeletionAllowed": false,
"isDeleted": false,
"isEnabled": false,
"language": "en"
}, {
"id": "2a5e218ae77c4d6683ecea35266ccc24",
"name": "net & store",
"isDeletionAllowed": false,
"isDeleted": false,
"isEnabled": false,
"language": "en"
}, {
"id": "f63b1cd96abb4f42962267af43dfe935",
"name": "rock & class",
"isDeletionAllowed": false,
"isDeleted": false,
"isEnabled": false,
"language": "en"
},
"totalCount": 6
}

Answer

Something like this:

JS

        var app = angular.module('plunker', []);

        app.controller('MainCtrl', function($scope) {

          $scope.arrayName=
             {
               "ABC": [{
            "id": "a33e777fdc444222bfa7fab2baec17a0",
            "name": "music & store",
            "isDeletionAllowed": false,
            "isDeleted": false,
            "isEnabled": false,
            "language": "en"
            }, {
            "id": "9896710e6ac6454c96ec29e9a83355e4",
            "name": "music class",
            "isDeletionAllowed": false,
            "isDeleted": false,
            "isEnabled": false,
            "language": "en"
            }, {
            "id": "b65ab7e3fdc24e23851ffb2e940ff00f",
            "name": "music store",
            "isDeletionAllowed": false,
            "isDeleted": false,
            "isEnabled": false,
            "language": "en"
            }, {
            "id": "2a5e218ae77c4d6683ecea35266ccc24",
            "name": "net & store",
            "isDeletionAllowed": false,
            "isDeleted": false,
            "isEnabled": false,
            "language": "en"
            }, {
            "id": "f63b1cd96abb4f42962267af43dfe935",
            "name": "rock & class",
            "isDeletionAllowed": false,
            "isDeleted": false,
            "isEnabled": false,
            "language": "en"
            }],
            "totalCount": 6
        };

        function getMyArray (){
          var arr = Array.apply(null, Array($scope.arrayName.totalCount));
          return arr.map(function (x, i) { return i+1 });
        }

        $scope.myArray = getMyArray();
        $scope.page = $scope.myArray[0];

        });

HTML:

<select ng-model="page" ng-options="o for o in myArray"></select>

Working Plunkr here

References: https://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/

http://www.2ality.com/2013/11/initializing-arrays.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Comments