2017-04-21 57 views
0

我有一個問題,我確定有一個簡單的解決方案,但我找不到它。我有一個JSON文件,裏面有三個獨立的數組。網站1,網站2和網站3。我通過一個app.controller檢索,並需要使用ng-repeat在3個獨立的選擇列表中生成選項。我沒有創建3個app.controller實例,而是使用3個數組在表單級別創建一個實例,然後使用ng-repeat 3次來獲取每次相關的值,但我無法解決如何使用ng-repeat檢索值。該JSON我有如下:ng-repeat在JSON文件中的兩個獨立數組Angular JS

[ 
    { 
"Websites1": [ 
    { 
    "0": "1", 
    "ID": "1", 
    "1": "Value 1", 
    "WebsiteName": "Value 1", 
    "2": "EI", 
    "WebsiteCode": "EI" 
    }, 
    { 
    "0": "2", 
    "ID": "2", 
    "1": "Value 2", 
    "WebsiteName": "Value 2", 
    "2": "IC", 
    "WebsiteCode": "IC" 
    }, 
    { 
    "0": "3", 
    "ID": "3", 
    "1": "Value 3", 
    "WebsiteName": "Value 3", 
    "2": "SO", 
    "WebsiteCode": "SO" 
    } 
] 
}, 
{ 
"Websites2": [ 
    { 
    "0": "1", 
    "ID": "1", 
    "1": "Value 1a", 
    "WebsiteName": "Value 1a", 
    "2": "EI", 
    "WebsiteCode": "EI" 
    }, 
    { 
    "0": "2", 
    "ID": "2", 
    "1": "Value 2a", 
    "WebsiteName": "Value 2a", 
    "2": "IC", 
    "WebsiteCode": "IC" 
    }, 
    { 
    "0": "3", 
    "ID": "3", 
    "1": "Value 3a", 
    "WebsiteName": "Value 3a", 
    "2": "SO", 
    "WebsiteCode": "SO" 
    } 
] 
}, 
{ 
"Websites3": [ 
    { 
    "0": "1", 
    "ID": "1", 
    "1": "Value 1a", 
    "WebsiteName": "Value 1a", 
    "2": "EI", 
    "WebsiteCode": "EI" 
}, 
    { 
    "0": "2", 
    "ID": "2", 
    "1": "Value 2a", 
    "WebsiteName": "Value 2a", 
    "2": "IC", 
    "WebsiteCode": "IC" 
    }, 
    { 
    "0": "3", 
    "ID": "3", 
    "1": "Value 3a", 
    "WebsiteName": "Value 3a", 
    "2": "SO", 
    "WebsiteCode": "SO" 
    } 
] 
} 
] 

而且控制器:

app.controller('FormController', [ '$http', function($http) { 

var form = this; 
form.json = []; 

var config = { 
    params: { 
     command: 'banner.json.form.website', 
     ajax: 'true' 
    } 
}  

$http.get('https://api.myjson.com/bins/o9r47', config).success(function(data) { 

    console.log(data); 
    form.json = data; 

}).error(function(data) { 

    console.log('error'); 

}); 
}]); 

都好那裏,被正確返回JSON。這裏的NG-重複:

<div ng-controller="FormController as form" class="portlet-body form"> 
<select class="form-control select2"> 
<option ng-repeat="json in form.json.Websites" value="{{json.WebsiteCode}}">{{json.WebsiteName}}</option> 
</select> 
</div> 

如果我使用一個JSON對象,只有頂層數據,那麼這個工程:

<div ng-controller="FormController as form" class="portlet-body form"> 
<select class="form-control select2"> 
<option ng-repeat="json in form.json" value="{{json.WebsiteCode}}">{{json.WebsiteName}}</option> 
</select> 
</div> 

但我無法弄清楚如何從一個陣列拉取數據在JSON對象內。有人可以幫忙嗎?

謝謝!

+0

請確認您收到數據包裝成單個數組元素,所以'['&']'周圍的例子括號是不一個失誤。 – Seprum

回答

1

既然你已經嵌套數組顯示,你可以使用嵌套ng-repeat嘗試。

而第二層是object,這裏是基於$indexsite['Websites' + ($index + 1)]讀取數據的技巧。

參閱下面的代碼片斷:

angular.module("app", []) 
 
    .controller('FormController', ['$http', function($scope) { 
 
    var form = this; 
 

 
    form.json = [{ 
 
     "Websites1": [{ 
 
      "0": "1", 
 
      "ID": "1", 
 
      "1": "Value 1", 
 
      "WebsiteName": "Value 1", 
 
      "2": "EI", 
 
      "WebsiteCode": "EI" 
 
      }, 
 
      { 
 
      "0": "2", 
 
      "ID": "2", 
 
      "1": "Value 2", 
 
      "WebsiteName": "Value 2", 
 
      "2": "IC", 
 
      "WebsiteCode": "IC" 
 
      }, 
 
      { 
 
      "0": "3", 
 
      "ID": "3", 
 
      "1": "Value 3", 
 
      "WebsiteName": "Value 3", 
 
      "2": "SO", 
 
      "WebsiteCode": "SO" 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     "Websites2": [{ 
 
      "0": "1", 
 
      "ID": "1", 
 
      "1": "Value 1a", 
 
      "WebsiteName": "Value 1a", 
 
      "2": "EI", 
 
      "WebsiteCode": "EI" 
 
      }, 
 
      { 
 
      "0": "2", 
 
      "ID": "2", 
 
      "1": "Value 2a", 
 
      "WebsiteName": "Value 2a", 
 
      "2": "IC", 
 
      "WebsiteCode": "IC" 
 
      }, 
 
      { 
 
      "0": "3", 
 
      "ID": "3", 
 
      "1": "Value 3a", 
 
      "WebsiteName": "Value 3a", 
 
      "2": "SO", 
 
      "WebsiteCode": "SO" 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     "Websites3": [{ 
 
      "0": "1", 
 
      "ID": "1", 
 
      "1": "Value 1a", 
 
      "WebsiteName": "Value 1a", 
 
      "2": "EI", 
 
      "WebsiteCode": "EI" 
 
      }, 
 
      { 
 
      "0": "2", 
 
      "ID": "2", 
 
      "1": "Value 2a", 
 
      "WebsiteName": "Value 2a", 
 
      "2": "IC", 
 
      "WebsiteCode": "IC" 
 
      }, 
 
      { 
 
      "0": "3", 
 
      "ID": "3", 
 
      "1": "Value 3a", 
 
      "WebsiteName": "Value 3a", 
 
      "2": "SO", 
 
      "WebsiteCode": "SO" 
 
      } 
 
     ] 
 
     } 
 
    ]; 
 

 

 
    }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="FormController as form" class="portlet-body form"> 
 

 
    <select class="form-control select2" ng-repeat="site in form.json"> 
 
    <option ng-repeat="item in site['Websites' + ($index + 1)]" value="{{item.WebsiteName}}">{{item.WebsiteName}}</option> 
 
    </select> 
 
</div>

+0

謝謝。完美的作品。 – pjordanna

0

試試這個希望它會爲你工作

<html> 
 
<head> 
 
\t <script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
 

 
\t <script> 
 
\t \t var app=angular.module("myapp", []); 
 
\t \t app.controller("namesctrl", function($scope){ 
 
\t \t \t $scope.myArray = [ 
 
\t \t \t { 
 
\t \t \t \t "Websites1": [ 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "1", 
 
\t \t \t \t \t "ID": "1", 
 
\t \t \t \t \t "1": "Value 1", 
 
\t \t \t \t \t "WebsiteName": "Value 1", 
 
\t \t \t \t \t "2": "EI", 
 
\t \t \t \t \t "WebsiteCode": "EI" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "2", 
 
\t \t \t \t \t "ID": "2", 
 
\t \t \t \t \t "1": "Value 2", 
 
\t \t \t \t \t "WebsiteName": "Value 2", 
 
\t \t \t \t \t "2": "IC", 
 
\t \t \t \t \t "WebsiteCode": "IC" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "3", 
 
\t \t \t \t \t "ID": "3", 
 
\t \t \t \t \t "1": "Value 3", 
 
\t \t \t \t \t "WebsiteName": "Value 3", 
 
\t \t \t \t \t "2": "SO", 
 
\t \t \t \t \t "WebsiteCode": "SO" 
 
\t \t \t \t } 
 
\t \t \t \t ] 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t "Websites2": [ 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "1", 
 
\t \t \t \t \t "ID": "1", 
 
\t \t \t \t \t "1": "Value 1a", 
 
\t \t \t \t \t "WebsiteName": "Value 1a", 
 
\t \t \t \t \t "2": "EI", 
 
\t \t \t \t \t "WebsiteCode": "EI" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "2", 
 
\t \t \t \t \t "ID": "2", 
 
\t \t \t \t \t "1": "Value 2a", 
 
\t \t \t \t \t "WebsiteName": "Value 2a", 
 
\t \t \t \t \t "2": "IC", 
 
\t \t \t \t \t "WebsiteCode": "IC" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "3", 
 
\t \t \t \t \t "ID": "3", 
 
\t \t \t \t \t "1": "Value 3a", 
 
\t \t \t \t \t "WebsiteName": "Value 3a", 
 
\t \t \t \t \t "2": "SO", 
 
\t \t \t \t \t "WebsiteCode": "SO" 
 
\t \t \t \t } 
 
\t \t \t \t ] 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t "Websites3": [ 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "1", 
 
\t \t \t \t \t "ID": "1", 
 
\t \t \t \t \t "1": "Value 1a", 
 
\t \t \t \t \t "WebsiteName": "Value 1a", 
 
\t \t \t \t \t "2": "EI", 
 
\t \t \t \t \t "WebsiteCode": "EI" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "2", 
 
\t \t \t \t \t "ID": "2", 
 
\t \t \t \t \t "1": "Value 2a", 
 
\t \t \t \t \t "WebsiteName": "Value 2a", 
 
\t \t \t \t \t "2": "IC", 
 
\t \t \t \t \t "WebsiteCode": "IC" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t "0": "3", 
 
\t \t \t \t \t "ID": "3", 
 
\t \t \t \t \t "1": "Value 3a", 
 
\t \t \t \t \t "WebsiteName": "Value 3a", 
 
\t \t \t \t \t "2": "SO", 
 
\t \t \t \t \t "WebsiteCode": "SO" 
 
\t \t \t \t } 
 
\t \t \t \t ] 
 
\t \t \t } 
 
\t \t \t ]; 
 

 
\t \t \t $scope.getArrayData = function(data){ 
 
\t \t \t \t if (data.Websites1) { 
 
\t \t \t \t \t return data.Websites1 
 
\t \t \t \t } 
 
\t \t \t \t if (data.Websites2) { 
 
\t \t \t \t \t return data.Websites2 
 
\t \t \t \t } 
 
\t \t \t \t if (data.Websites3) { 
 
\t \t \t \t \t return data.Websites3; 
 
\t \t \t \t } 
 

 
\t \t \t } 
 

 
\t \t }); 
 

 
\t \t 
 
\t </script> 
 
</head> 
 
<body ng-app="myapp" ng-controller="namesctrl"> 
 
\t <div ng-repeat="json in myArray"> 
 
\t \t 
 
\t \t <select class="form-control select2"> 
 
\t \t \t <option ng-repeat="json1 in getArrayData(json)" value="{{json.ID}}">{{json1.WebsiteName}}</option> 
 
\t \t </select> 
 
\t </div> 
 

 
</body> 
 
</html>