Angular.jsのコントローラからデータを取得できません

私はAngularJSをかなり新しくしています。実際、これは私の最初の日です。私がここでやろうとしているのは、作成したコントローラーからデータをフェッチしてビューに表示することです。しかし、私はなぜ、それが単に働いているのか分からない。Angular.jsのコントローラからデータを取得できません

私のデータは学生のリストです。私がしようとしているのは、リストの順序で学生のリストを表示し、テキストボックスに入力された名前に従ってリストをフィルタすることです。

私のコードは非常に単純です：

<!DOCTYPE html> 
<html ng-app> 

    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
    </head> 

    <body> 
    <h1>Hello!</h1> 

     Student Name: 
    <br /> 
     <input type="text" ng-model="sname" /> {{ sname }} 
    <div id="mvvm_communication" class="container" data-ng-controller="simpleController"> 

     <ul> 
     <li ng-repeat="stud in students | filter:sname | orderBy:'firstname'" >{{stud.firstname | lowercase }}, {{stud.lastname| uppercase }}</li> 
     </ul> 

    </div> 

    <script> 
     function simpleController($scope) 
     { 
     $scope.students=[ 
       {firstname:'Jordan',lastname:'Rains'}, 
       {firstname:'Michael',lastname:'Jordan'}, 
       {firstname:'John',lastname:'Doe'}, 
       {firstname:'John',lastname:'Smith'}, 
       {firstname:'Simcha',lastname:'Michelle'}, 
       {firstname:'Sydney',lastname:'Rivers'}, 
       {firstname:'Summer',lastname:'Rose'}, 
       {firstname:'Georgia',lastname:'Schubert'}, 
       {firstname:'Rosalie',lastname:'Fayadh'} 
       ]; 

     }  
    </script>  
    </body> 
</html>

はここfiddleです。

出典

2016-04-03 John Doe

コントローラを登録する必要があります。

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

myApp.controller('simpleController', ['$scope', simpleController]);

さらに、ng-appに名前を入れる必要があります。

<html ng-app="myApp">

出典

2016-04-03 11:23:14

ありがとうございます。私はこれについて知りませんでした –

私はあなたのJSFiddleを更新しました：

HTML：

<div ng-app="app"> 
    <div ng-controller="simpleController"> 
    <h1>Hello Student!</h1> Student Name:<br/> 
    <input type="text" ng-model="sname" /> {{ sname }} 
    <div id="mvvm_communication" class="container"> 
     <ul> 
     <li ng-repeat="stud in students | filter:sname | orderBy:'firstname'" >{{stud.firstname | lowercase }}, {{stud.lastname| uppercase }}</li> 
     </ul> 
    </div> 
    </div> 
</div>

角度：

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


app.controller('simpleController', function($scope) { 

     $scope.students=[ 
       {firstname:'Jordan',lastname:'Rains'}, 
       {firstname:'Michael',lastname:'Jordan'}, 
       {firstname:'John',lastname:'Doe'}, 
       {firstname:'John',lastname:'Smith'}, 
       {firstname:'Simcha',lastname:'Michelle'}, 
       {firstname:'Sydney',lastname:'Rivers'}, 
       {firstname:'Summer',lastname:'Rose'}, 
       {firstname:'Georgia',lastname:'Schubert'}, 
       {firstname:'Rosalie',lastname:'Fayadh'} 
       ]; 
});

出典

2016-04-03 11:26:40

あなたは、角のモジュールを定義する必要があります。

 angular.module('app', []).controller('simpleController', simpleController);

を

jsFiddle

出典

2016-04-03 11:33:34 ronapelbaum

Angular.jsのコントローラからデータを取得できません

答えて

関連する問題