2017-06-30 17 views
0

jsonが返すログインをng-optionsに入れたいと思います。 問題はログインで、id、urlなどの他の属性はサブタイプが のように表示されますどのように値を指定してng-optionsを作成できますか?サブアイテムを使ってAngularJs ng-optionsを作成する方法

Htmlの

<html ng-app="myapp"> 
<head> 
... 
</head> 
<body ng-controller="MainController"> 
     <select ng-options="l as list.items.login for l in lists" 
      ng-model="item" ng-change="update()"></select> 
... </html> 

MainController.js($のscope.listは、以下のJSONを返している)

... 
var onUserComplete = function (response) { 
     $scope.list = response.data; 
... 

私は JSONはこの1、Uを試してみてください

{ 
     "total_count": 4, 
     "incomplete_results": false, 
     "items": [ 
     { 
      "login": "mojombo", 
      "id": 1, 
      "avatar_url": "https://avatars3.githubusercontent.com/u/1?v=3", 
      "gravatar_id": "", 
      "url": "https://api.github.com/users/mojombo", 
      "html_url": "https://github.com/mojombo", 
      "followers_url": "https://api.github.com/users/mojombo/followers", 
      "following_url": "https://api.github.com/users/mojombo/following{/other_user}", 
      "gists_url": "https://api.github.com/users/mojombo/gists{/gist_id}", 
      "starred_url": "https://api.github.com/users/mojombo/starred{/owner}{/repo}", 
      "subscriptions_url": "https://api.github.com/users/mojombo/subscriptions", 
      "organizations_url": "https://api.github.com/users/mojombo/orgs", 
      "repos_url": "https://api.github.com/users/mojombo/repos", 
      "events_url": "https://api.github.com/users/mojombo/events{/privacy}", 
      "received_events_url": "https://api.github.com/users/mojombo/received_events", 
      "type": "User", 
      "site_admin": false, 
      "score": 49.54566 
     }, 
     { 
      "login": "tomdale", 
      "id": 90888, 
      "avatar_url": "https://avatars1.githubusercontent.com/u/90888?v=3", 
      "gravatar_id": "", 
      "url": "https://api.github.com/users/tomdale", 
      "html_url": "https://github.com/tomdale", 
      "followers_url": "https://api.github.com/users/tomdale/followers", 
      "following_url": "https://api.github.com/users/tomdale/following{/other_user}", 
      "gists_url": "https://api.github.com/users/tomdale/gists{/gist_id}", 
      "starred_url": "https://api.github.com/users/tomdale/starred{/owner}{/repo}", 
      "subscriptions_url": "https://api.github.com/users/tomdale/subscriptions", 
      "organizations_url": "https://api.github.com/users/tomdale/orgs", 
      "repos_url": "https://api.github.com/users/tomdale/repos", 
      "events_url": "https://api.github.com/users/tomdale/events{/privacy}", 
      "received_events_url": "https://api.github.com/users/tomdale/received_events", 
      "type": "User", 
      "site_admin": false, 
      "score": 40.39779 
     }, 
     { 
      "login": "tmcw", 
      "id": 32314, 
      "avatar_url": "https://avatars1.githubusercontent.com/u/32314?v=3", 
      "gravatar_id": "", 
      "url": "https://api.github.com/users/tmcw", 
      "html_url": "https://github.com/tmcw", 
      "followers_url": "https://api.github.com/users/tmcw/followers", 
      "following_url": "https://api.github.com/users/tmcw/following{/other_user}", 
      "gists_url": "https://api.github.com/users/tmcw/gists{/gist_id}", 
      "starred_url": "https://api.github.com/users/tmcw/starred{/owner}{/repo}", 
      "subscriptions_url": "https://api.github.com/users/tmcw/subscriptions", 
      "organizations_url": "https://api.github.com/users/tmcw/orgs", 
      "repos_url": "https://api.github.com/users/tmcw/repos", 
      "events_url": "https://api.github.com/users/tmcw/events{/privacy}", 
      "received_events_url": "https://api.github.com/users/tmcw/received_events", 
      "type": "User", 
      "site_admin": false, 
      "score": 36.811348 
     }, 
     { 
      "login": "tommy351", 
      "id": 411425, 
      "avatar_url": "https://avatars3.githubusercontent.com/u/411425?v=3", 
      "gravatar_id": "", 
      "url": "https://api.github.com/users/tommy351", 
      "html_url": "https://github.com/tommy351", 
      "followers_url": "https://api.github.com/users/tommy351/followers", 
      "following_url": "https://api.github.com/users/tommy351/following{/other_user}", 
      "gists_url": "https://api.github.com/users/tommy351/gists{/gist_id}", 
      "starred_url": "https://api.github.com/users/tommy351/starred{/owner}{/repo}", 
      "subscriptions_url": "https://api.github.com/users/tommy351/subscriptions", 
      "organizations_url": "https://api.github.com/users/tommy351/orgs", 
      "repos_url": "https://api.github.com/users/tommy351/repos", 
      "events_url": "https://api.github.com/users/tommy351/events{/privacy}", 
      "received_events_url": "https://api.github.com/users/tommy351/received_events", 
      "type": "User", 
      "site_admin": false, 
      "score": 15.513104 
     } 
     ] 
    } 
+0

**正確**あなたは* "サブアイテム" *とはどういう意味ですか?あなたは[''](https://developer.mozilla.org/ja/docs/Web/HTML/Element/optgroup)のような意味ですか? – Phil

+0

"login": "mojombo"、 –

+0

それは文字通り私には何も教えてくれません。結果として得られるHTMLがどのように表示されるべきかの例を挙げてください。例えば、\t ' – Phil

答えて

2

を返さログイン名に基づいて項目を選択できます

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

 
app.controller('myCrtl',function($scope){ 
 

 
$scope.data={ 
 
     "total_count": 4, 
 
     "incomplete_results": false, 
 
     "items": [ 
 
     { 
 
      "login": "mojombo", 
 
      "id": 1, 
 
      "avatar_url": "https://avatars3.githubusercontent.com/u/1?v=3", 
 
      "gravatar_id": "", 
 
      "url": "https://api.github.com/users/mojombo", 
 
      "html_url": "https://github.com/mojombo", 
 
      "followers_url": "https://api.github.com/users/mojombo/followers", 
 
      "following_url": "https://api.github.com/users/mojombo/following{/other_user}", 
 
      "gists_url": "https://api.github.com/users/mojombo/gists{/gist_id}", 
 
      "starred_url": "https://api.github.com/users/mojombo/starred{/owner}{/repo}", 
 
      "subscriptions_url": "https://api.github.com/users/mojombo/subscriptions", 
 
      "organizations_url": "https://api.github.com/users/mojombo/orgs", 
 
      "repos_url": "https://api.github.com/users/mojombo/repos", 
 
      "events_url": "https://api.github.com/users/mojombo/events{/privacy}", 
 
      "received_events_url": "https://api.github.com/users/mojombo/received_events", 
 
      "type": "User", 
 
      "site_admin": false, 
 
      "score": 49.54566 
 
     }, 
 
     { 
 
      "login": "tomdale", 
 
      "id": 90888, 
 
      "avatar_url": "https://avatars1.githubusercontent.com/u/90888?v=3", 
 
      "gravatar_id": "", 
 
      "url": "https://api.github.com/users/tomdale", 
 
      "html_url": "https://github.com/tomdale", 
 
      "followers_url": "https://api.github.com/users/tomdale/followers", 
 
      "following_url": "https://api.github.com/users/tomdale/following{/other_user}", 
 
      "gists_url": "https://api.github.com/users/tomdale/gists{/gist_id}", 
 
      "starred_url": "https://api.github.com/users/tomdale/starred{/owner}{/repo}", 
 
      "subscriptions_url": "https://api.github.com/users/tomdale/subscriptions", 
 
      "organizations_url": "https://api.github.com/users/tomdale/orgs", 
 
      "repos_url": "https://api.github.com/users/tomdale/repos", 
 
      "events_url": "https://api.github.com/users/tomdale/events{/privacy}", 
 
      "received_events_url": "https://api.github.com/users/tomdale/received_events", 
 
      "type": "User", 
 
      "site_admin": false, 
 
      "score": 40.39779 
 
     }, 
 
     { 
 
      "login": "tmcw", 
 
      "id": 32314, 
 
      "avatar_url": "https://avatars1.githubusercontent.com/u/32314?v=3", 
 
      "gravatar_id": "", 
 
      "url": "https://api.github.com/users/tmcw", 
 
      "html_url": "https://github.com/tmcw", 
 
      "followers_url": "https://api.github.com/users/tmcw/followers", 
 
      "following_url": "https://api.github.com/users/tmcw/following{/other_user}", 
 
      "gists_url": "https://api.github.com/users/tmcw/gists{/gist_id}", 
 
      "starred_url": "https://api.github.com/users/tmcw/starred{/owner}{/repo}", 
 
      "subscriptions_url": "https://api.github.com/users/tmcw/subscriptions", 
 
      "organizations_url": "https://api.github.com/users/tmcw/orgs", 
 
      "repos_url": "https://api.github.com/users/tmcw/repos", 
 
      "events_url": "https://api.github.com/users/tmcw/events{/privacy}", 
 
      "received_events_url": "https://api.github.com/users/tmcw/received_events", 
 
      "type": "User", 
 
      "site_admin": false, 
 
      "score": 36.811348 
 
     }, 
 
     { 
 
      "login": "tommy351", 
 
      "id": 411425, 
 
      "avatar_url": "https://avatars3.githubusercontent.com/u/411425?v=3", 
 
      "gravatar_id": "", 
 
      "url": "https://api.github.com/users/tommy351", 
 
      "html_url": "https://github.com/tommy351", 
 
      "followers_url": "https://api.github.com/users/tommy351/followers", 
 
      "following_url": "https://api.github.com/users/tommy351/following{/other_user}", 
 
      "gists_url": "https://api.github.com/users/tommy351/gists{/gist_id}", 
 
      "starred_url": "https://api.github.com/users/tommy351/starred{/owner}{/repo}", 
 
      "subscriptions_url": "https://api.github.com/users/tommy351/subscriptions", 
 
      "organizations_url": "https://api.github.com/users/tommy351/orgs", 
 
      "repos_url": "https://api.github.com/users/tommy351/repos", 
 
      "events_url": "https://api.github.com/users/tommy351/events{/privacy}", 
 
      "received_events_url": "https://api.github.com/users/tommy351/received_events", 
 
      "type": "User", 
 
      "site_admin": false, 
 
      "score": 15.513104 
 
     } 
 
     ] 
 
    } 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="myCrtl"> 
 

 
<select ng-model="selectedItem" ng-options="item.login for item in data.items"></select> 
 
<br>Selected Item:{{selectedItem}} 
 
</body>

+0

ありがとうShiva MLここであなたのサンプルを使って見ることができます:http://jsbin.com/powulajesu/edit?output –

関連する問題