Anzeigen von Daten in Tabellenzeilen von einem Json Array - AngularJs

Ich bin ziemlich neu mit AngularJs und erstellte eine Tabelle. Jede Zeile liest Daten von einem JsonArray, das innerhalb eines Controllers deklariert ist. Die Zeilen sind jedoch leer.Anzeigen von Daten in Tabellenzeilen von einem Json Array - AngularJs

Der Code wird hier gezeigt: 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>

Was ist falsch?

Danke,

Theo.

Quelle

2017-02-19 Theo

Zwei Fehler gemacht Sie hier

1, Sie definieren cotroller aber mit app.module('tableController',function(){ so dass es zu app.controller('tableController',function(){ ändern.

2, Definieren Sie Ihre Controller in Sicht mit as heißt tableController as ctrl

Versuchen Sie, diese

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

Quelle

2017-02-19 17:02:48

Zuerst sollten Sie ng-app deklarieren, um von Angular framework erkannt zu werden. Lassen Sie mich ein Beispiel zeigen:

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

dann in Ihrem tableController Sie sollten Sie in ihrem Umfang Variable deklarieren (nicht in this). Scope ist ein Kleber zwischen Ansicht und Controller. Es ist wie ein Rohr zwischen zwei Flaschen, um Wasser von einer Flasche in eine andere zu gießen.

Zum Beispiel:

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

Quelle

2017-02-19 16:38:44 StepUp

Ich habe am oberen Rand der Seite. Und immer noch nichts passiert :(. Ich habe noch nicht die $ inject-Sache überprüft, aber ich nehme an, es muss etwas mit Abhängigkeitsinjektion (ich benutze es in Android-Entwicklung viel). – Theo

@Theo Injektion überprüfen, wie es am meisten ist wesentlicher Teil der Datenbindung (Bindungsansicht und Controller) – StepUp

Ich bin mir ziemlich sicher, dass dies ohne Injektion gelöst werden kann – Theo

ich etwas in Ihrem Code festgelegt. Jetzt funktioniert es richtig. Vergessen Sie nicht über ng-app und wie Sie Controller in Ihrer App hinzufügen. Wenn Sie Fragen haben, fragen Sie bitte!

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>

Quelle

2017-02-19 17:05:54

Anzeigen von Daten in Tabellenzeilen von einem Json Array - AngularJs

Antwort

Verwandte Themen