在选择中显示多个值，一个项目一个项目

Question

我有以下json语法：

{
    "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"
     }
     ]

}

我想在选择中显示所有的tra_keywords。 我用这个：

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

虽然有效，但我的选择会在字段中显示我的所有关键字。选择显示为：

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

我想一个接一个。选择显示我想：

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

我该怎么做？我认为我的ng-options不正确。感谢

我收到的数据是：

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

Answer 1

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>

Answer 2

你是对，你的ng-options是不正确的。它应该是：

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

编辑：

阅读其中一条评论的答案，如果要从所有结果中创建列表，则需要展平数据。 ng-options期望迭代的项目数组或对象 - 迭代属性。

这里有plunker如何压扁

Answer 3

这解决了我的问题，感谢所有，特别是sss和New Dev

＆＃13;

＆＃13;

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


  }

});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;