堆棧內存溢出
  簡體   English   中英

如何使用子項制作AngularJs ng-options

[英]How to make an AngularJs ng-options with subitems

 原文  2017-06-30 03:39:38  8   1    angularjs/ json/ angularjs-ng-options/ subitem

問題描述

我想將json返回的登錄信息放入ng-options中。 問題是登錄名和其他屬性（例如id，url等）是“如何使用其值創建Angular 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;
...

我傑森回來了 

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

1 個解決方案

解決方案1
 2 已采納  2017-06-30 05:04:17

試試這個，你可以根據登錄名選擇項目 

 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 AngularJS，ng-選項 Angular.js：ng選項 ng-options與AngularJS AngularJS ng-選項 AngularJs：如何使用ng-options綁定對象 如何在ng-options中的AngularJS中對數組排序？ 帶有Ionic的AngularJS，如何使用ng-options 如何在AngularJS select上過濾ng-options？ 如何在angularjs中使用ng-options 如何使用 angularjs 過濾器和 ng-options 在 select 中使某些選項變粗
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM