2016-08-21 4 views
0

Ich arbeite an $ http, um Details aus einer anderen Datei mit angular js zu holen.

<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 Datei enthält die Schüler Details im JSON-Format.

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

Die Steuerung wird nicht erfolgreich ausgeführt. Fehle ich etwas? Auch ich bekomme nichts in der Antwort. Bitte helfen Sie.

+0

registriert haben Sie Ihren Controller? ('angular.module (moduleName) .controller ...' – AranS

+0

Erstellen Sie ein Modul für angular und verweisen Sie den App-Namen, registrieren Sie auch den Controller mit dem App-Namen –

Antwort

1

Es ist eine HTTP-Anfrage und die Datei sollte irgendwo gehostet werden, und immer ist es besser, json als JSON-Erweiterungsdatei zu haben.

Es gibt einige Probleme mit Ihrem Code,

(i) Ich sehe nicht einen Modulnamen

(ii) Sie haben Ihren Controller als sController definiert und deren Verwendung als studentController

Sehen Sie sich diese Probe

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

}]); 

Hier ist die Arbeits sample

-1

Bitte korrigieren Sie den Controller-Namen in function.Use sController statt studentController und wie Sie $http Anfrage machen, so wird die Datei finden, die in irgendeiner URL gehostet wird entweder http://localhost oder andere domain.

Html:

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

Script:

<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

ich Ihren Code geändert haben, wo ich gemacht habe, den Inhalt direkt aus dem Text zu lesen, es leicht verständlich zu machen, Sie können das "http" hinzufügen, um den Inhalt aus dem URL-Kontext zu lesen.

Dieser AngularJS-Code hat das richtige Modul und den registrierten Controller zum Modulteil, den ich getestet habe und den Screenshot unten anschloss.

Bitte lassen Sie mich wissen, wenn Sie Fragen haben.

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

Ausgabe von Code: enter image description here