Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

完整code：

＆＃13;

(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;
  }
})();

＆＃13;

<!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>

＆＃13;

使用json数据创建下拉列表

1 个答案: