在Json数组中显示表行内的数据 - AngularJs

时间：2017-02-19 16:28:06

标签： angularjs twitter-bootstrap-3

我对AngularJs很新，并创建了一个表。每行都从JsonArray中读取数据，该数据在控制器内声明。但是，行是空的。

代码显示在此处：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>

有什么问题？

谢谢，

西奥。

3 个答案:

答案 0 :(得分：2)

你在这里犯了两个错误

1，您正在定义cotroller，但使用app.module('tableController',function(){，请将其更改为app.controller('tableController',function(){。

2，使用as tableController as ctrl

在视图中定义您的控制器

试试这个

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

首先，您应该声明ng-app被Angular框架识别。让我举个例子：

<!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);        
}());

答案 2 :(得分：1)

我在你的代码中修改了一些内容。现在它正常工作。 不要忘记 ng-app 以及如何在应用中添加控制器。如果您有任何疑问，请询问！

＆＃13;
＆＃13; 
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;
});
＆＃13; 
@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css')
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题