如何使用子项制作 AngularJs ng-options答案

【问题标题】：How to make an AngularJs ng-options with subitems如何使用子项制作 AngularJs ng-options
【发布时间】：2017-06-30 03:39:38
【问题描述】：

我想将 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;
...

我 json返回

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

【问题讨论】：

究竟是什么意思“subitem”？你的意思是像<optgroup>？
"登录": "mojombo",
这实际上并没有告诉我什么。你为什么不举一个结果HTML应该是什么样子的例子，即<select></select>
id 喜欢使用 Angular ng-options 来创建一个 OPTION，例如：
所以就用ng-options="login.login for login in lists"

标签： angularjs json angularjs-ng-options subitem

【解决方案1】：

试试这个，你可以根据登录名选择项目

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>

【讨论】：

感谢 Shiva ML，正如我们在此处使用您的示例所看到的那样，它正在工作：jsbin.com/powulajesu/edit?output