Angular JS ng-options Auswahlliste von JSON

Question

Ich versuche eine select mit ng-options zu verwenden, um mein Dropdown zu füllen. Das ist mein JSON

{ "Food": [ { "Name": Apple, "HealthCondition": [ { "Name": "High Blood Pressure", "Eat": null }, { "Name": "High Cholesterol", "Eat": null }, { "Name": "Heart Disease", "Eat": null }, { "Name": "Osteoporosis", "Eat": null }, { "Name": "Digestive Disorder", "Eat": null } ] }

Und das ist mein select <select class="chosen-select" ng-model="selectedValue" ng-options="x.HealthCondition for x in myResults.Food" multiple chosen></select> und das Ergebnis, das ich bin immer ist [object Object],[object Object],[object Object],[object Object],[object Object]

Ich versuche, eine Liste der Gesundheitszustand Namen zu bekommen! Jede Hilfe würde sehr geschätzt werden. Darauf stundenlang gestanden. Ich verwende die Angular Chosen Direktive. Dies funktioniert korrekt, wenn ich nur das Feld Name wie x.Name verwende, aber ich möchte HealthCondition Name abrufen.

Jede Hilfe würde sehr geschätzt werden!

Answer 1

Einige Beobachtungen:

• Ihr JSON ist nicht gültig. Apple sollte eine Zeichenkette gegen den name Schlüssel sein.
• Sie wiederholen das Food Array in ng-options es sollte HealthCondition sein.

DEMO

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

 
myApp.controller('MyCtrl',function($scope) { 
 
    $scope.jsonObj = { 
 
    "Food": [ 
 
    { 
 
     "Name": "Apple", 
 
     "HealthCondition": [ 
 
     { 
 
     "Name": "High Blood Pressure", 
 
     "Eat": null 
 
     }, 
 
     { 
 
     "Name": "High Cholesterol", 
 
     "Eat": null 
 
     }, 
 
     { 
 
     "Name": "Heart Disease", 
 
     "Eat": null 
 
     }, 
 
     { 
 
     "Name": "Osteoporosis", 
 
     "Eat": null 
 
     }, 
 
     { 
 
     "Name": "Digestive Disorder", 
 
     "Eat": null 
 
     } 
 
    ] 
 
}]}; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <select class="chosen-select" ng-model="selectedValue" ng-options="x.Name as x.Name for x in jsonObj.Food[0].HealthCondition" multiple chosen></select> 
 
</div>

Answer 2

Versuchen <select class="chosen-select" ng-model="selectedValue" ng-options="x.Name as x.Name for x in myResults.Food.HealthCondition" multiple chosen></select>

Answer 3

Das Problem ist, dass Ihre Daten nicht in der Lage ist, in seinem aktuellen Format für ng-Optionen verwendet werden. Sie müssen die verfügbaren HealthConditions auf ein einzelnes Array anstatt auf mehrere Objekte mit einem HealthCondition-Array als Eigenschaft reduzieren.

In Ihrem Controller müssen Sie die Daten in einem einzigen Array abzubilden, wie so:

$scope.HealthConditions = myResults.reduce(function(arr, result){ 
    for(var i in result.HealthCondition){ 
     arr.push(result.HealthCondition[i]); 
    } 
    return arr; 
}, []); 

Und dann Ihrer Ansicht verwenden Sie die folgenden Schritte aus:

<select class="chosen-select" ng-model="selectedValue" ng-options="x.Name for x in HealthConditions" multiple chosen></select>