2017-08-28 63 views
0

結合我有一個關聯數組像下面我想用我的下拉綁定:下拉值未與關聯數組

{ 
     "Item1": [ 
      { 
      "title": "Item1", 
      "choices": [ 
       "Egg", 
       "burger", 
      ] 
      } 
     ], 
     "Item2": [ 
      { 
      "title": "Item2", 
      "choices": [ 
       "Pizza", 
       "Rice", 
      ] 
      } 
     ] 
    } 

我想基於這個關聯數組綁定下拉列表中,但問題是它顯示爲object object

我想表明在下拉標題爲每個項目類似下面的:

Item1 
Item2 

我試圖從下面SO問題採取參考,但它沒有工作:

key-value pairs in ng-options

Angularjs ng-options with an array of key-pair

var app = angular.module("myApp", []); 
 
app.controller("MyController", function ($scope) { 
 
    $scope.item= 
 
    { 
 
     "Item1": [ 
 
      { 
 
      "title": "Item1", 
 
      "choices": [ 
 
       "Egg", 
 
       "burger", 
 
      ] 
 
      } 
 
     ], 
 
     "Item2": [ 
 
      { 
 
      "title": "Item2", 
 
      "choices": [ 
 
       "Pizza", 
 
       "Rice", 
 
      ] 
 
      } 
 
     ] 
 
    } 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<ul ng-app="myApp" ng-controller="MyController"> 
 
    <select ng-model="myItem.title" ng-options="key as value for (key , value) in item"> 
 
      <option value="">Select Items</option> 
 
    </select> 
 
</ul>

+0

做你的項目的詳細信息(含標題,選擇的對象)需要被包裹在陣列?如果沒有這個數組包裝器就會更容易解析。 – jdubjdub

+0

@jdubjdub其實我有各種類型的項目,如法語,意大利語,中國人在其中每個項目將有一些選擇即是我有這個項目作爲關聯數組 –

回答

2

它應該像這樣:

ng-options="value as key for (key , value) in item"> 

var app = angular.module("myApp", []); 
 
app.controller("MyController", function ($scope) { 
 

 
    $scope.item= 
 
    { 
 
     "Item1": [ 
 
      { 
 
      "title": "Item1", 
 
      "choices": [ 
 
       "Egg", 
 
       "burger", 
 
      ] 
 
      } 
 
     ], 
 
     "Item2": [ 
 
      { 
 
      "title": "Item2", 
 
      "choices": [ 
 
       "Pizza", 
 
       "Rice", 
 
      ] 
 
      } 
 
     ] 
 
    } 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<ul ng-app="myApp" ng-controller="MyController"> 
 
    <select ng-model="myItem.title" ng-options="value as key for (key , value) in item"> 
 
      <option value="">Select Items</option> 
 
    </select> 
 
     
 
    {{myItem.title}} 
 
</ul>

+0

爲什麼值[0]?不會這將始終只選擇第一我的關聯數組的項目? –

+0

目前還不清楚什麼是期權價值?看到更新的答案。 –

+0

Upvoted爲您的慈善努力,幫助我。請給我解釋一下關於這個關聯數組的ng-options :)當然是 –