在Json數組中顯示錶格行內的數據 - AngularJs

我對AngularJs頗爲新穎，並創建了一個表格。每行都是從控制器內聲明的JsonArray中讀取數據。但是，這些行是空的。在Json數組中顯示錶格行內的數據 - 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>

有什麼不對？

謝謝，

泰奧。

來源

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

來源

2017-02-19 16:38:44 StepUp

我把在頁面的頂部。而且還沒有任何反應:(。我還沒有檢查$注入的事情，但我想它必須做一些依賴注入（我在Android開發中使用它很多） – 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數組中顯示錶格行內的數據 - AngularJs

回答

相關問題