Binding json arrays in angular js select option

Question

I am working with select box in angular js. i need to bind the data to the select box from the json,How do i populate json with arrays inside a select box in angular. i have the following code.

HTML

  <div ng-app="myApp" ng-controller="myCtrl">
        <select ng-model="selectedName" ng-options="x.names.name for x in names">
        </select>
  </div>

JS

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
       $scope.names = {
          "jobs": [
      {
        "Software": [
          {
            "name": "Developer",
            "displayName": "App Developer"
          },
          {
            "name": "Designer",
            "displayName": "App Designer"
          }
        ]
      },
      {
        "Business": [
          {
            "name": "Sales",
            "displayName": "Sales Manager"
          },
          {
            "name": "Marketing",
            "displayName": "Head of Marketing"
          }
        ]
      }
    ]
  };
  });

How do i populate the json $scope.names inside the select box. i am finding difficulty as the json have arrays. Thanks in advance

Answer 1

Try this one may be it will help you
Use ng-repeat on <select> tag

<select name="singleSelect" id="singleSelect" ng-model="selectedName">
  <option value="">---Please select---</option> <!-- not selected / blank option -->
  <option ng-repeat="n in names.software" value="{{n.name}}">{{n.displayName}}</option>
</select>

same way you can add different data.

Answer 2

It will be alot more easier if you prepare the data in your controller

$scope.values = [];
angular.forEach($scope.names, function (value, key) {
    angular.forEach(value, function (value2, key2) {
        angular.forEach(value2, function (value3, key3) {
            angular.forEach(value3, function (value4, key4) {
                $scope.values.push(value4.name);
            });
        });
    });
});

and use $scope.values in your select

Answer 3

One possible way to do this by using custom directive.

<div ng-app="myApp" ng-controller="myCtrl">
    <select ng-model='selectedName' custom-options>
        <option value="">-- choose an option --</option>
    </select>
</div>

var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
    $scope.names = {
          "jobs": [
          {
            "Software": [
              {
                "name": "Developer",
                "displayName": "App Developer"
              },
              {
                "name": "Designer",
                "displayName": "App Designer"
              }
            ]
          },
          {
            "Business": [
              {
                "name": "Sales",
                "displayName": "Sales Manager"
              },
              {
                "name": "Marketing",
                "displayName": "Head of Marketing"
              },
              {
                "name": "Sales1",
                "displayName": "Sales Manager1"
              },
              {
                "name": "Marketing1",
                "displayName": "Head of Marketing1"
              }
            ]
          }
        ]
      };
  }).directive("customOptions", function () {
        return function (scope, element, attrs) {
            var data = scope['names']['jobs'];
            var propertyName = 'name';
            if (angular.isArray(data)) {
                angular.forEach(data, function(value, key) {
                    angular.forEach(value, function(ivalue, ikey) {
                        for (var i = 0; i < ivalue.length; i++) {
                            element.append(angular.element('<option>').text(ivalue[i][propertyName]).attr('value',ivalue[i][propertyName]));
                        }
                    })
                });
            }
        }
    })

JS FIDDLE