使用 json 数据创建下拉列表答案

【问题标题】：Create dropdown list with json data使用 json 数据创建下拉列表
【发布时间】：2016-08-01 01:24:02
【问题描述】：

我想从下面的 json 数据中检索名称和描述字段，然后将其附加到页面。目前我可以看到信息。这是我尝试过的，但它不起作用。我敢肯定它远非正确，但我希望朝着正确的方向前进。

mainApp.controller('drpdwnCtrl',['$scope','$http' , function ( $scope, $http) {
  // $scope.ChoreList = null;
  //Declaring the function to load data from database
  $scope.fillChoreList = function () {
      $http({
          method: 'GET',
          url: 'https://tiy-homeshare.herokuapp.com/homes/26/completed_chores', // Travis'
          // data: $scope.ChoreList,
          headers: {Authorization: JSON.parse(localStorage.getItem( "user_token")) }
      }).success(function (result) {
          $scope.completeChoreList = result.chores.completed;
          console.log($scope.completeChoreList);
      });
  };
  // Calling the function to load the data on pageload
  $scope.fillChoreList();
}]); // end drpdwnCtrl

{
  "chores": {
    "completed": [
      {
        "id": 61,
        "chore_creator_id": 97,
        "home_id": 26,
        "name": "empty",
        "description": "trash",
        "bill_value": null,
        "votes": null,
        "thumbs_up": null,
        "created_at": "2016-07-31T20:43:06.013Z",
        "completed_at": "2016-07-31T20:46:31.604Z",
        "chore_completer_id": 97,
        "chore_assignee_id": null,
        "avatar": null,
        "chore_xp": 40,
        "completed": true
      },

  <div ng-controller="drpdwnCtrl">
      <select ng-options="chores in completeChoreList" ng-model="selectedChores" >
          <option value="" label="Select a chore"></option>
      </select>
  </div>

【问题讨论】：

好问题。这就是我们的身份验证系统的工作原理。

标签： jquery html angularjs json

【解决方案1】：

假设您在$http 请求中正确检索了JSON，您只需更正ngOptions 的构造。应该是这样的：

<select ng-options="chores.name + ' ' + chores.description for chores in completeChoreList" ng-model="selectedChores">
  <option value="" label="Select a chore"></option>
</select>

完整的code:

(function() {
  angular
    .module('app', [])
    .controller('drpdwnCtrl', drpdwnCtrl);

  drpdwnCtrl.$inject = ['$scope'];

  function drpdwnCtrl($scope) {
    var data = {  
       "chores":{  
          "completed":[  
             {  
                "id":61,
                "chore_creator_id":97,
                "home_id":26,
                "name":"empty",
                "description":"trash",
                "bill_value":null,
                "votes":null,
                "thumbs_up":null,
                "created_at":"2016-07-31T20:43:06.013Z",
                "completed_at":"2016-07-31T20:46:31.604Z",
                "chore_completer_id":97,
                "chore_assignee_id":null,
                "avatar":null,
                "chore_xp":40,
                "completed":true
             },
             {  
                "id":60,
                "chore_creator_id":97,
                "home_id":26,
                "name":"clean",
                "description":"bathroom",
                "bill_value":null,
                "votes":null,
                "thumbs_up":null,
                "created_at":"2016-07-31T20:42:59.097Z",
                "completed_at":"2016-07-31T20:46:33.943Z",
                "chore_completer_id":97,
                "chore_assignee_id":null,
                "avatar":null,
                "chore_xp":90,
                "completed":true
             },
             {  
                "id":59,
                "chore_creator_id":97,
                "home_id":26,
                "name":"sweep",
                "description":"house",
                "bill_value":null,
                "votes":null,
                "thumbs_up":null,
                "created_at":"2016-07-31T20:42:50.982Z",
                "completed_at":"2016-07-31T20:48:54.927Z",
                "chore_completer_id":97,
                "chore_assignee_id":null,
                "avatar":null,
                "chore_xp":50,
                "completed":true
             }
          ]
       }
    };  

    $scope.completeChoreList = data.chores.completed;
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body>
  <div ng-controller="drpdwnCtrl">
    <select ng-options="chores.name + ' ' + chores.description for chores in completeChoreList" ng-model="selectedChores">
      <option value="" label="Select a chore"></option>
    </select>
  </div>
</body>

</html>

【讨论】：

这太棒了，看起来它会工作，但我想知道如何编辑驻留在 heroku 服务器上的 json 数据。我仅使用这两个条目作为示例。
嗯..有什么问题？
抱歉不清楚。只是好奇我是否可以将“var data=”指向 GET $http 请求？
你是对的。我看不到我的下拉菜单，因为我处于移动欺骗视图中，而且它非常小。它完全有效。再次感谢@developer33 ！！！！你不是第一次帮助我了。
很高兴能帮助更多一次:) 你能接受答案吗？