CODEWITHSUNDEEP
angularjsselectng-options
user4153231
user4153231

Reputation:

Display multiple values in a select, one item by one item

I have the following json syntax:

{
    "count": 90,
    "results": [
     {
         "tra_keywords": [
             "car",
             "plane",
             "Bike",
             "boat"
             ],
         "tra_title": "Jack"
     },
     {
         "tra_keywords": [
             "blue",
             "red",
             "green",
             "silver"
             ],
         "tra_title": "Averell"
     },
     {
         "tra_keywords": [
             "square",
             "column",
             "square",
             "line"
         "tra_title": "Joe"
     }
     ]

}

I would like to display all my tra_keywords in a select. I use this:

<select class="form-control" id="rechercheKeywords" ng-model="rechercheKeywords" ng-options="resultats.tra_keywords for resultats in resultatsJSON.results"></select>

It works but my select display all my keywords in the field. Select display is:

first option:     car,plane,Bike,boat
second option:    blue,red,green,silver
...               square,column,square,line

I would like to have this one by one. Select display i would like:

first option:      car
second option:     plane
...                Bike
                   boat
                   blue
                   red
                   green
                   silver
                   square
                   column
                   line

How can i do that ? I think my ng-options is incorrect. Thanks

I receive my data with:

myApp.controller("myappCtrl",   ['$scope','$http',function($scope,$http) {
   $http.get('../testANGULAR/json/flux.json')
     .success(function(data){
      scope.resultatsJSON=data;
})....

Upvotes: 0

Views: 1514

Answers (3)

user4153231
user4153231

Reputation:

This solve my problem, thanks to all, specially sss and New Dev

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

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

  $scope.data = {
    "count": 90,
    "results": [{
      "tra_keywords": [
        "car",
        "plane",
        "Bike",
        "boat"
      ],
      "tra_title": "Jack"
    }, {
      "tra_keywords": [
        "blue",
        "red",
        "green",
        "silver"
      ],
      "tra_title": "Averell"
    }, {
      "tra_keywords": [
        "square",
        "column",
        "square",
        "line"
      ],
      "tra_title": "Joe"
    }]

  };

  $scope.getKeywords = function() {

    var keywords = [];

    angular.forEach($scope.data.results, function(obj) {


      angular.forEach(obj.tra_keywords, function(keyword) {

      
        if (keywords.indexOf(keyword) < 0)

          keywords.push(keyword);

      });

    });

    return keywords


  }

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="fCtrl">


    <select class="form-control" id="rechercheKeywords" ng-model="rechercheKeywords" ng-options="r for r in getKeywords()"></select>

    <p>Selected: {{rechercheKeywords}}</p>
  </div>
</div>

Upvotes: 0

sylwester
sylwester

Reputation: 16498

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

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

  $scope.data = {
    "count": 90,
    "results": [{
      "tra_keywords": [
        "car",
        "plane",
        "Bike",
        "boat"
      ],
      "tra_title": "Jack"
    }, {
      "tra_keywords": [
        "blue",
        "red",
        "green",
        "silver"
      ],
      "tra_title": "Averell"
    }, {
      "tra_keywords": [
        "square",
        "column",
        "square",
        "line"
      ],
      "tra_title": "Joe"
    }]

  };

  $scope.getKeywords = function() {

    var keywords = [];

    angular.forEach($scope.data.results, function(obj) {


      angular.forEach(obj.tra_keywords, function(keyword) {

      
        if (keywords.indexOf(keyword) < 0)

          keywords.push(keyword);

      });

    });

    return keywords


  }

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="fCtrl">


    <select class="form-control" id="rechercheKeywords" ng-model="rechercheKeywords" ng-options="r for r in getKeywords()"></select>

    <p>Selected: {{rechercheKeywords}}</p>
  </div>
</div>

Upvotes: 1

New Dev
New Dev

Reputation: 49590

You're right, your ng-options is incorrect. It should be:

ng-options="keyword for keyword in resultatsJSON.results[0].tra_keywords"

EDIT:

Reading your answer to one of the comments, if you want to create a list from all the results, then you need to flatten the data. ng-options expects an array of items to iterate over, or an object - to iterate over properties.

Here's a plunker with how to flatten

Upvotes: 0

Related Questions