AngularJS JSONファイルをng-clickでロードする

現在Angular JSを使用してファイルからJSONデータを解析してHTMLテーブルを表示したいのですが、誰かが助けてくれますか？私は2つの異なるJSONファイルAngularJS JSONファイルをng-clickでロードする

HTMLコード

<html> 
    <div ng-controller="get_controller"> 
     <input type="text" ng-model="accountnumber" name="accountnumber" class="form-control search-query" placeholder="Enter Account Number"> 
     <span class="input-group-btn"> 
      <button type="submit" ng-click="geValues()" class="btn btn-primary">Submit</button> 
     </span> 
    </div> 

    <div ng-controller="get_controller"> 
     <table> 
      <tbody> 
       <tr> 
        <th ng-repeat="list in personDetails">{{list.Name}} 
        </th> 
       </tr> 
       <tr> 
        <td class="features" ng-repeat="list in personDetails">{{list.Location}} 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</html>

角度JSコード

var app = angular.module('myApp', ["ngTable"]); 
app.controller('get_controller', function ($scope, $http) { 

    $scope.geValues = function() { 
     $http({method: 'POST', url: 'posts.json'}).success(function(data) { 
      $scope.post = data; 
      $scope.personDetails = Employee; 
      }) 
    }, 
});

の記事のために2つのdivを得ることができる方法の拡張として

も.json（Jsonファイル）

{ 
    "Employee": [ 
    { 
     "Name": "Rocky", 
     "Location": "Office" 
    }, 
    { 
     "Name": "John", 
     "Location": "Home" 
    } 
    ] 
}

出典

2016-09-24 Batman

いただきましたエラー、関数の内部呼び出しを入れて、NG-クリックで発生する場合、コードは、

$http.get('test.json').then(function (response){ $scope.post = response.data; $scope.personDetails = response.data.Employee; });

すべきですか？従業員は何ですか？それは 'data 'でなければなりません。従業員。 –

@DeendayalGarg 申し訳ありませんが、私はこのコードを持っていますが、私はEmployee = data ['Employee']を追加しませんでした。問題をクリックすると、コンソールでデータを取得できますが、テーブルが表示されません。 – Batman

GETリクエストである必要があります。また、Employee配列を含むレスポンスオブジェクトからデータにアクセスする必要があります。あなたはそれが

$scope.geValues = function() { 
     $http.get('test.json').then(function(response) { 
     $scope.post = response.data; 
     $scope.personDetails = response.data.Employee; 

     }); 
    }

DEMO

出典

2016-09-24 18:23:06 Sajeetharan

まだ動作していません。 – Batman

@MaheshGadagi今すぐチェック – Sajeetharan

本当にありがとうございます。ボタンをクリックした後にやりたい – Batman

AngularJS JSONファイルをng-clickでロードする

答えて

関連する問題