2016-08-21 22 views
0

私は、角度jを使用して別のファイルから詳細を取得するために$ httpに取り組んでいます。

<body> 
    <h2>AngularJS</h2> 
    <div ng-app = "" ng-controller = "sController"> 

    <table> 
     <tr> 
      <th>Name</th> 
      <th>Roll No</th> 
      <th>Percentage</th> 
     </tr> 

     <tr ng-repeat = "student in students"> 
      <td>{{ student.Name }}</td> 
      <td>{{ student.RollNo }}</td> 
      <td>{{ student.Percentage }}</td> 
     </tr> 
    </table> 
    </div> 

<script> 
    function studentController($scope,$http) { 
     var url = "C:\\Users\\Test\\Desktop\\data.txt"; 

     $http.get(url).success(function(response) { 
     alert('success'); 
      $scope.students = response; 
     }).error(function (response) { 
    alert("error"); 

    return status; 
    }); 
    } 
</script>  

data.txtをファイルには、JSON形式で学生の詳細が含まれています。

[{"Name" : "Smith","RollNo" : 11,"Percentage" : "80%"}] 

制御が成功しません。何か不足していますか?また、私は応答の中に何かを取得していません。助けてください。

+0

は、あなたのコントローラーを登録していますか? ( 'angular.module(moduleName).controller ... ' – AranS

+0

角度用のモジュールを作成し、アプリ名を参照するとともに、コントローラにアプリ名を登録する –

答えて

1

これはhttp要求です。ファイルはどこかでホストする必要があります.json拡張ファイルとしてjsonを使用する方がよいでしょう。あなたのコードを持ついくつかの問題があり

(I)Iは、モジュール名を参照しません

(ⅱ)あなたはsControllerとしてあなたのコントローラを定義し、studentController

としてそれを使用していますこのサンプルをチェックしてください。ここ

app.controller("MyController", ["$scope","$http", 
    function($scope, $http) { 
      $http.get('test.json').then(function (response){ 
       $scope.students = response.data; 
       console.log(response.data); 
     }); 

}]); 

が働いsample

ですそれはいくつかのURLのいずれか http://localhostまたはその他の domainでホストされているファイルがありますので、あなたが $http要求を行っているよう
-1

はfunction.Use sControllerの代わりstudentControllerでコントローラ名を訂正してください。

HTML:

<div ng-app = "MyApp" ng-controller = "sController"> 

スクリプト:

<script> 
var app = angular.module("MyApp",[]); 
    app.controller("sController",function ($scope,$http) { 
     var url = "http://www.example.com/data.txt"; 

     $http.get(url).success(function(response) { 
     alert('success'); 
      $scope.students = response; 
     }).error(function (response) { 
    alert("error"); 

    return status; 
    }); 
    }); 
</script> 
0

私は私が理解しやすいように、テキストから直接コンテンツを読むために作られているコードを、変更しました、 URLコンテキストからコンテンツを読み込むために「http」を追加することができます。

このAngularJSコードには、適切なモジュールとコントローラがモジュールパーツに登録されています。これは、以下のスクリーンショットをテストして添付しています。

質問がありましたらお知らせください。コードの

<!DOCTYPE html> 
     <html ng-app="MyApp"> 
     <head> 
      <meta charset="utf-8" /> 
      <title>AngularJS Plunker</title> 
      <script data-require="[email protected]" src="https://code.angularjs.org/1.0.8/angular.js" 
      data-semver="1.0.8"></script> 
      <script> 
      var app = angular.module('MyApp', []); 



      app.controller('MainCtrl', function($scope) { 
       $scope.name = "World"; 

       var text = 

      '[{"Name" : "Smith","RollNo" : 111,"Percentage" : "80%"}]'; 

       var obj = JSON.parse 

      (text); 

       $scope.students = obj; 

      }); 
      </script> 
     </head> 
      <body ng- 
       controller="MainCtrl"> 
        <p>Hello {{name}}!</p> 
       <div ng-controller="MainCtrl"> 
      <table> 
       <tr> 
        <th>Name</th> 
        <th>Roll No</th> 
        <th>Percentage</th> 
       </tr> 
       <tr ng-repeat="student in students"> 
        <td>{{ student.Name }}</td> 
        <td>{{ student.RollNo }}</td> 
        <td>{{ student.Percentage }}</td> 
       </tr> 
      </table> 
      </div> 
     </body> 
    </html> 

出力: enter image description here