jsonデータを含むドロップダウンリストを作成する

下のjsonデータから名前と説明フィールドを取得して、ページに追加したいと考えています。現時点では、私は情報を見ることができるだけで大丈夫だろう。これは私が試したことであり、うまくいきません。私はそれが正しいところにはどこにもないと確信していますが、私は正しい方向にプッシュしたいです。あなたはJSONが正しく$httpリクエストで、あなただけのngOptionsのあなたの建設を修正するために持っていることを取得していると仮定すると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>

出典

2016-08-01 trav

良い質問。それが私たちの認証システムのために働くものです。 – trav

。それはこのようにする必要があります：

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

出典

2016-08-01 01:31:56 developer033

これは素晴らしいことですが、うまくいくように見えますが、私はherokuサーバーに存在するjsonデータをどのように編集できるのだろうと思います。私はこれらの2つのエントリを例えば使用していました。 – trav

うーん..何が問題なの？ – developer033

申し訳ありませんが明確ではありません。ちょうど私がGET $ http要求に "var data ="を指すことができるかどうか不思議ですか？ – trav

jsonデータを含むドロップダウンリストを作成する

答えて

関連する問題