2017-04-21 1 views
0

간단한 해결책이 있지만 문제가 있습니다. 찾을 수 없습니다. JSON 파일에 3 개의 개별 배열이 있습니다. 웹 사이트 1, 웹 사이트 2 및 웹 사이트 3. app.controller를 통해이를 가져오고 ng-repeat를 사용하여 3 개의 개별 선택 목록에 옵션을 생성해야합니다. 3 개의 app.controller 인스턴스를 생성하는 대신 3 개의 배열을 가진 폼 레벨에서 하나를 생성 한 다음 ng-repeat를 3 번 ​​사용하여 매번 관련 값을 얻는 방법을 생각해 냈습니다. ng-repeat를 사용하여 값을 검색하십시오. 모든 좋은이JSON 파일에서 두 개의 개별 배열에 ng-repeat Angular JS

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가 제대로 반환되는 :

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

그리고 컨트롤러를 다음과 같이 내가 가진 JSON이다. 여기에 NG-반복이다 :

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

하지만 배열에서 데이터를 가져 오는 방법을 알아낼 수 없습니다 :

<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 객체를 사용하는 경우 다음이 작동 JSON 개체 내에서. 누군가 제발 도와 줄 수 있니?

감사합니다.

+0

[''및] 당신은 하나의 배열 요소에 랩 데이터를받을 수 있으므로 '확인하세요'당신의 예는 대괄호는 아니다 실수. – Seprum

답변

1

, 당신은 중첩 된 ng-repeat으로 시도 할 수 것이 작동이 희망을 봅니다.

두 번째 레이어는 이고 여기에 $index : site['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>

관련 문제