Comment faire une AngularJs ng-options avec des sous-éléments

Je voudrais mettre les logins json retournés dans ng-options. Le problème est le login et d'autres attributs comme id, url etc. est comme sous-élément de Comment puis-je faire une ng-options Angular avec ses valeurs?Comment faire une AngularJs ng-options avec des sous-éléments

Le 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 $ est de retour JSON ci-dessous)

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

Je Json retourné

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

Source

2017-06-30 Adriano Frota

Que ** exactement ** voulez-vous dire par * "sous-élément" *? Voulez-vous dire comme un [''] (https://developer.mozilla.org/en/docs/Web/HTML/Element/optgroup)? – Phil

"login": "mojombo", –

Cela ne me dit littéralement rien. Pourquoi ne pas donner un exemple de ce que le HTML résultant devrait ressembler, à savoir '' – Phil

Essayez celui-ci, u sélectionne les articles en fonction du nom de connexion

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>

Source

2017-06-30 05:04:17

Merci Shiva ML cela fonctionne comme nous pouvons le voir en utilisant votre exemple ici: http://jsbin.com/powulajesu/edit?output –

Comment faire une AngularJs ng-options avec des sous-éléments

Répondre

Questions connexes