получить данные с помощью angularJS

0

Я пытаюсь получить данные в таблице HTML с помощью angularJS, я разделил проект на 3 части:

1- Основная часть: main.html: загрузить файл таблицы html, а также скрипт Java (angularJS) (Main.html)

<div class="panel panel-primary">
    <div class="panel-heading">Student List</div>
    <div ng-include="'Student_list.html'">
</div>
<script src= "../js/ngMain.js"></script>

2- Таблица Html: тег таблицы html (Student_list.html)

<table class="table table-borAdherentdered table-hover" id="stdlst">
        <thead>
            <tr>
                <th>Id</th>
                <th>Full Name</th>
                <th>Email</th>
                <th>Birth Date</th>
                <th>Class</th>
            </tr>
        </thead>
        <tbody>
                <tr ng-repeat="std in students">
                    <td>{{std.Id}}</td>
                    <td>{{std.Name}}</td>
                    <td>{{std.Email}}</td>
                    <td>{{std.BoD}}</td>
                    <td>{{std.Class}}</td>
                </tr>
        </tbody>

    </table>

3- JS File: загрузить данные из mySQL (ngMain.js)

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

    $scope.GetStudent=function() {
        $scope.students=[];
        $http.post("Main.php",{'ScriptName':'GetData','ScriptParam':'student'+"|"+'Id'+";"+'Name'+";"+'Email'+";"+'BoD'+";"+'Class',"DataTypeResult":'string'})
       .success(function (data,status,headers,config) {
        $scope.students=data;
        console.log("Get Student List succesfully");
      });
    }

});

Скрипт php (Main.php), с которым я работал, тестировал с помощью приложения REST без проблем.

Моя проблема здесь: Я не получаю никаких данных, только заголовок таблицы (BTW: в таблице студентов много записей)? Любая идея Что пропало? или если я сделаю это неправильно, пожалуйста, поправьте меня.

Благодарю. /Koul

  • 0
    Что вы видите, если у вас console.log (data) в обработчике успеха?
  • 0
    Где вы вызываете $ scope.GetStudent (); <table class = "table table-borAdherentdered table-hover" id = "stdlst" data-ng-init = "GetStudent ()"> Затем проверьте, получаете ли вы какие-либо данные внутри функции успеха.
Показать ещё 5 комментариев
Теги:

2 ответа

0
Лучший ответ

Мне кажется, что ваша функция $ scope.GetStudent никогда не вызывается в вашем контроллере, поэтому данные для вашей таблицы никогда не получаются. Если $ scope.students остается пустым, вы увидите только заголовки таблицы.

Чтобы отладить эти проблемы, рекомендуется просмотреть вкладку сети в своих инструментах разработчика используемого браузера, просто чтобы узнать, вызывается ли ваш поставщик данных (Main.php). В этом случае я подозреваю, что это не так, потому что нет никакого вызова вашей функции $ scope.GetStudent в вашем предоставленном коде.

Чтобы вызвать функцию при загрузке сценария, просто добавьте вызов ($ scope.GetStudent()) в свой контроллер сразу после определения вашей функции.

Пример:

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

    $scope.GetStudent=function() {
        $scope.students=[];
        $http.post("Main.php",{'ScriptName':'GetData','ScriptParam':'student'+"|"+'Id'+";"+'Name'+";"+'Email'+";"+'BoD'+";"+'Class',"DataTypeResult":'string'})
        .success(function (data,status,headers,config) {
            $scope.students=data;
            console.log("Get Student List succesfully");
        });
    }
    $scope.GetStudent();
});

С Уважением,

семафор

Поделиться
  • 0
    Тот же ответ, что и Mattex83, пожалуйста, прочитайте его.
  • 0
    Без вызова функции, которая получает ваши данные, у вас не будет данных :) Взгляните на: docs.angularjs.org/tutorial/step_07 Там вы найдете, как использовать маршруты и представления для условной загрузки вашей таблицы и контроллера, поэтому данные отображаются и извлекаются только тогда, когда вам это нужно.
Показать ещё 7 комментариев
1

Я думаю, что код, который вы опубликовали, является неполным. Ng-app и ng-controller вообще отсутствуют, и функция GetStudent никогда не вызывается.

Однако здесь есть рабочий скрипач с макетными данными, которые, я думаю, помогут вам.

http://jsfiddle.net/ds7hryn5/2/

HTML:

<div ng-app="myApp">
  <div class="panel panel-primary" >
  <div class="panel-heading">Student List</div>
  <table class="table table-borAdherentdered table-hover" id="stdlst" ng-controller="myCtrl">
       <thead>
         <tr>
            <th>Id</th>
            <th>Full Name</th>
            <th>Email</th>
            <th>Birth Date</th>
            <th>Class</th>
         </tr>
       </thead>
       <tbody>
            <tr ng-repeat="std in students">
                <td>{{std.Id}}</td>
                <td>{{std.Name}}</td>
                <td>{{std.Email}}</td>
                <td>{{std.BoD}}</td>
                <td>{{std.Class}}</td>
            </tr>
       </tbody>

   </table>
   </div>
</div>

JS

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

  $scope.GetStudent=function() {
    $scope.students=[{
        Id:4,
        Name:'Name1',
        Email:'[email protected]',
        BoD:'bod1',
        Class:'class'
    },{
        Id:5,
        Name:'Name2',
        Email:'[email protected]',
        BoD:'bod2',
        Class:'class'
    },{
        Id:6,
        Name:'Name3',
        Email:'[email protected]',
        BoD:'bod3',
        Class:'class'
    }];

  }
  $scope.GetStudent();

}]);
Поделиться
  • 0
    Я не хочу вызывать GetStudent () в JS или в основном html, и я хотел вызывать, только когда загружен html-файл таблицы.
  • 0
    посмотрите это обновление: jsfiddle.net/ds7hryn5/3 и, пожалуйста, скажите мне, почему данные не загружаются
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню