Nested list for select option in angularjs

Question

Absolutely new to angularjs

I have json object as follows

data =
[{ company : "companyA", headOffice : "cityA", industry :"software", transactionCurency : "USD" , otherAspect :{numberofEmployees : "10000", public : "yes", listed : "NYSE"}},

{ company : "companyB", headOffice : "cityA", industry :"software", transactionCurency : "USD" , otherAspect :{numberofEmployees : "20000", public : "no", listed : "NA"}},

{ company : "companyC", headOffice : "cityB", industry :"Oil", transactionCurency : "EUR" , otherAspect :{numberofEmployees : "150000", public : "yes", listed : "LSE"}},
{ company : "companyD", headOffice : "cityX", industry :"manufactoring", transactionCurency : "YEN" , otherAspect :{numberofEmployees : "30000", public : "yes", listed : "TSE"}
},

{ company : "companyE", headOffice : "cityB", industry :"Auto", transactionCurency : "EUR" , otherAspect :{numberofEmployees : "330000", public : "no", listed : "NA"}}];

I want to create drop downs on the basis of "otherAspect" inner list.. as numberOfEmployees ={3000,330000,1000, 20000}, listed ="NYSE,NA,LSE,TSE" likewise.

I have tried to use ng-repeat but for each object it created a drop down , therefore I had hundreds of drop down.

As I said I am new to this forum as well angularjs I am not sure what info I need to provide. Thanks

Answer 1

You can do this with ng-options:

<select ng-model="aspect" ng-options="d.otherAspect.listed for d in data"></select>

Demo on JSFiddle.

Answer 2

Try like this

HTML:

<div ng-app="myApp">
<div ng-controller="MyCtrl">
<select ng-model="aspect" ng-options="d.otherAspect.listed for d in data">
</select>
<br/>Selected: {{aspect}}
</div>
</div>

Javascript:

 var myApp = angular.module('myApp', []);
 myApp.controller('MyCtrl', ['$scope', function($scope) {
 $scope.data = [{
  company: "companyA",
  headOffice: "cityA",
  industry: "software",
  transactionCurency: "USD",
  otherAspect: {
    numberofEmployees: "10000",
    public: "yes",
    listed: "NYSE"
  }
},

{
  company: "companyB",
  headOffice: "cityA",
  industry: "software",
  transactionCurency: "USD",
  otherAspect: {
    numberofEmployees: "20000",
    public: "no",
    listed: "NA"
  }
},

{
  company: "companyC",
  headOffice: "cityB",
  industry: "Oil",
  transactionCurency: "EUR",
  otherAspect: {
    numberofEmployees: "150000",
    public: "yes",
    listed: "LSE"
  }
}, {
  company: "companyD",
  headOffice: "cityX",
  industry: "manufactoring",
  transactionCurency: "YEN",
  otherAspect: {
    numberofEmployees: "30000",
    public: "yes",
    listed: "TSE"
  }
},

{
  company: "companyE",
  headOffice: "cityB",
  industry: "Auto",
  transactionCurency: "EUR",
  otherAspect: {
    numberofEmployees: "330000",
    public: "no",
    listed: "NA"
  }
}
];
}]);