Отображение данных внутри строк таблицы из Json Array - AngularJs

Я совершенно новый с AngularJs и создал таблицу. Каждая строка считывает данные из JsonArray, который объявляется внутри контроллера. Однако строки пустые.Отображение данных внутри строк таблицы из Json Array - AngularJs

Код показан здесь: https://jsfiddle.net/00x8bwp0/9/

<body> 

<div class="container"> 
    <div class="row row-content" ng-controller="tableController">    
      <div class="col-xs-12 col-sm-9" > 
      <h2>Facts &amp; Figures</h2> 
      <div class="table-responsive"> 
      <table class="table table-striped"> 
       <tr> 
        <th>Name</th> 
        <th>Date of Birth</th> 
        <th>Gender</th> 
        <th>Salary</th> 
       </tr> 
       <tr ng-repeat="employee in employees"> 
        <td>{{employee.name}}</td> 
        <td>{{employee.dateOfBirth | date:"dd/MM/yyyy" }}</td> 
        <td>{{employee.gender }}</td> 
        <td>{{employee.salary | number:2}}</td> 
       </tr> 

      </table> 
      </div> 

     </div> 
    </div> 
</div> 
<script src="../bower_components/angular/angular.min.js"></script> 
<script> 
    var app = angular.module('filterApp',[]); 

    app.module('tableController',function(){ 
     var employees = [ 
      { 
       name: "Ben", dateOfBirth: new Date("November 23, 1980"), 
       gender: "Male", salary: 55000.788 
      }, 
      { 
       name: "Sara", dateOfBirth: new Date("May 05, 1970"), 
       gender: "Female", salary: 68000 
      }, 
      { 
       name: "Mark", dateOfBirth: new Date("August 15, 1974"), 
       gender: "Male", salary: 57000 
      }, 
      { 
       name: "Pam", dateOfBirth: new Date("October 27, 1979"), 
       gender: "Female", salary: 53000 
      }, 
      { 
       name: "Todd", dateOfBirth: new Date("December 30, 1983"), 
       gender: "Male", salary: 60000 
      } 
     ]; 
     this.employees = employees; 
    }); 
</script>

Что не так?

Thanks,

Theo.

источник

2017-02-19 Theo

Две ошибки, которые вы сделали здесь

1, Вы определяете cotroller, но используя app.module('tableController',function(){ так изменить его app.controller('tableController',function(){.

2, Определить контроллер в режиме с as т.е. tableController as ctrl

Попробуйте

<!DOCTYPE html> 
 
<html lang="en" ng-app="filterApp"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> 
 
</script>     
 

 
<body> 
 

 

 
    <div class="container"> 
 
     <div class="row row-content" ng-controller="tableController as ctrl">    
 
      <div class="col-xs-12 col-sm-9" > 
 
      <h2>Facts &amp; Figures</h2> 
 
      <div class="table-responsive"> 
 
       <table class="table table-striped"> 
 
       <tr> 
 
        <th>Name</th> 
 
        <th>Date of Birth</th> 
 
        <th>Gender</th> 
 
        <th>Salary</th> 
 
       </tr> 
 
       <tr ng-repeat="employee in ctrl.employees"> 
 
        <td>{{employee.name}}</td> 
 
        <td>{{employee.dateOfBirth | date:"dd/MM/yyyy" }}</td> 
 
        <td>{{employee.gender }}</td> 
 
        <td>{{employee.salary | number:2}}</td> 
 
       </tr> 
 

 
      </table> 
 
     </div> 
 

 
    </div> 
 
</div> 
 
</div> 
 
<script> 
 

 
    var app = angular.module('filterApp',[]); 
 

 
    app.controller('tableController',function(){ 
 
     var employees = [ 
 
      { 
 
       name: "Ben", dateOfBirth: new Date("November 23, 1980"), 
 
       gender: "Male", salary: 55000.788 
 
      }, 
 
      { 
 
       name: "Sara", dateOfBirth: new Date("May 05, 1970"), 
 
       gender: "Female", salary: 68000 
 
      }, 
 
      { 
 
       name: "Mark", dateOfBirth: new Date("August 15, 1974"), 
 
       gender: "Male", salary: 57000 
 
      }, 
 
      { 
 
       name: "Pam", dateOfBirth: new Date("October 27, 1979"), 
 
       gender: "Female", salary: 53000 
 
      }, 
 
      { 
 
       name: "Todd", dateOfBirth: new Date("December 30, 1983"), 
 
       gender: "Male", salary: 60000 
 
      } 
 
     ]; 
 
     this.employees = employees; 
 
    }); 
 
</script> 
 

 
</body> 
 
</html>

источник

2017-02-19 17:02:48

Сначала вы должны объявить ng-app признанным Угловым каркасом. Позвольте мне показать пример:

<!doctype html> 
<html ng-app="yourApp"> 
    <head> 
     <link href="Content/bootstrap.css" rel="stylesheet"/> 
     <link href="Content/animations.css" rel="stylesheet" /> 
     <title>Mockup application:). You can do what you want.:)</title>    
    </head> 
    <body > 

     <div ng-view></div> 



     <script src="scripts/angular.js"></script> 
     <script src="scripts/angular-route.js"></script> 
     <script src="scripts/angular-ui-bootstrap.js"></script> 
     <script src="app/app.js"></script> 
     <script src="app/controllers/tableController.js"> </script>   
    </body> 
</html>

то в вашем tableController вы должны объявить, что вы переменной в области видимости (не в this). Scope - это клей между представлением и контроллером. Это как труба между двумя бутылками, чтобы вылить воду из одной бутылки в другую бутылку.

Например:

(function() 
{   
    var tableController=function($scope) { 
       $scope.employees= []; 

       function init() {       
        $scope.employees=[ 
      { 
       name: "Ben", dateOfBirth: new Date("November 23, 1980"), 
       gender: "Male", salary: 55000.788 
      }, 
      { 
       name: "Sara", dateOfBirth: new Date("May 05, 1970"), 
       gender: "Female", salary: 68000 
      }, 
      { 
       name: "Mark", dateOfBirth: new Date("August 15, 1974"), 
       gender: "Male", salary: 57000 
      }, 
      { 
       name: "Pam", dateOfBirth: new Date("October 27, 1979"), 
       gender: "Female", salary: 53000 
      }, 
      { 
       name: "Todd", dateOfBirth: new Date("December 30, 1983"), 
       gender: "Male", salary: 60000 
      } 
     ]; 
       } 

       init();    
      };  


    tableController.$inject=['$scope']; 

    angular.module('yourApp').controller('tableController', tableController);   
}());

источник

2017-02-19 16:38:44 StepUp

я поставил в верхней части страницы. И все же ничего не происходит :(Я еще не проверил значение $ inject, но я полагаю, что он должен что-то сделать с инъекцией зависимости (я использую его в Android Development много). – Theo

@ Theo проверяет инъекцию, поскольку это самый значительная часть привязки данных (привязка вида и контроллера) – StepUp

Я уверен, что это можно решить без инъекции. – Theo

я установил что-то в вашем коде. Теперь он работает правильно. Не забудьте про ng-app и как добавить контроллеры в ваше приложение. Если у вас есть вопросы, пожалуйста, спросите!

var app = angular.module('filterApp', []); 
 

 
app.controller('tableController', function() { 
 

 
    var employees = [{ 
 
    name: "Ben", 
 
    dateOfBirth: new Date("November 23, 1980"), 
 
    gender: "Male", 
 
    salary: 55000.788 
 
    }, { 
 
    name: "Sara", 
 
    dateOfBirth: new Date("May 05, 1970"), 
 
    gender: "Female", 
 
    salary: 68000 
 
    }, { 
 
    name: "Mark", 
 
    dateOfBirth: new Date("August 15, 1974"), 
 
    gender: "Male", 
 
    salary: 57000 
 
    }, { 
 
    name: "Pam", 
 
    dateOfBirth: new Date("October 27, 1979"), 
 
    gender: "Female", 
 
    salary: 53000 
 
    }, { 
 
    name: "Todd", 
 
    dateOfBirth: new Date("December 30, 1983"), 
 
    gender: "Male", 
 
    salary: 60000 
 
    }]; 
 

 
    this.employees = employees; 
 
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css')

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="container" ng-app="filterApp"> 
 
    <div class="row row-content" ng-controller="tableController as vm"> 
 
    <div class="col-xs-12 col-sm-9"> 
 
     <h2>Facts &amp; Figures</h2> 
 
     <div class="table-responsive"> 
 
     <table class="table table-striped"> 
 
      <tr> 
 
      <th>Name</th> 
 
      <th>Date of Birth</th> 
 
      <th>Genter</th> 
 
      <th>Salary</th> 
 
      </tr> 
 
      <tr ng-repeat="employee in vm.employees"> 
 
      <td>{{employee.name}}</td> 
 
      <td>{{employee.dateOfBirth | date:"dd/MM/yyyy" }}</td> 
 
      <td>{{employee.gender }}</td> 
 
      <td>{{employee.salary | number:2}}</td> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2017-02-19 17:05:54

Отображение данных внутри строк таблицы из Json Array - AngularJs

ответ

Смежные вопросы