2017-05-23 26 views
0

私はAngularJSを学習していて、いつか問題が残っています。コントローラ内に保存されている名前/市区町村のリストを表示しようとしていますが、ブラウザに表示されていません。以前、私は直接(data-ng-initを使用するコントローラなしで)それを行っていて、それは目に見えました。誰でも助けることができますか?角度のコントローラの作成問題

<html data-ng-app=""> 
    <head> 
     <title> Using AngularJS and etc</title> 
    </head> 
    <body data-ng-controller="SimpleController"> 
     Name: 
     <br/> 
     <input type="text" data-ng-model="name" /> 
     <br/> 
     <ul> 
     <li data-ng-repeat="cust in customers"> {{ cust.name }} - {{ cust.city | uppercase }}</li> 
     </ul> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
     <script> 
     function SimpleController($scope) { 

     $scope.customers = [ 
       {name: 'Dave', city: 'London'}, 
       {name: 'Naww', city: 'Tokyo'}, 
       {name: 'Jim Do', city: 'ABX'}, 
       {name: 'Ben', city: 'Oslo'} 
      ]; 

      } 
     </script> 
    </body> 
</html> 
+0

あなたは 'NG-アプリ= "someAppを"'定義し、また 'angular.module( "someAPP" でそれを設定する必要があります、[])。コントローラ().... –

+1

あなたのコードがうまくいかなかった理由を理解するのに役立つ、[この回答](https://stackoverflow.com/a/28728380/2435473)を読んでください。 –

+0

ありがとうPankaj。だから私はチュートリアルに従っていましたが、残念なことにチュートリアルのメソッドは1.3リリース後には機能しません。ありがとう。 –

答えて

3

あなたはNG-アプリが必要と以下のようにコントローラの宣言を使用し、あなたが宣言した方法は、1.3

DEMO

<html ng-app="myApp"> 
 
    <head> 
 
     <title> Using AngularJS and etc</title> 
 
    </head> 
 
    <body ng-controller="SimpleController"> 
 
     Name: 
 
     <br/> 
 
     <input type="text" ng-model="name" /> 
 
     <br/> 
 
     <ul> 
 
     <li data-ng-repeat="cust in customers"> {{ cust.name }} - {{ cust.city | uppercase }}</li> 
 
     </ul> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
     <script> 
 
     var app = angular.module('myApp',[]); 
 
     app.controller('SimpleController',function($scope){ 
 
     $scope.customers = [ 
 
       {name: 'Dave', city: 'London'}, 
 
       {name: 'Naww', city: 'Tokyo'}, 
 
       {name: 'Jim Do', city: 'ABX'}, 
 
       {name: 'Ben', city: 'Oslo'} 
 
      ]; 
 

 
      }); 
 
     </script> 
 
    </body> 
 
</html>

上の角度バージョンでは動作しません。
+0

ありがとうございます。はい、このメソッドは動作しています。実際には、私はオンラインチュートリアル(https://www.youtube.com/watch?v=i9MHigUZKEM)に従っていて、チューターが私のように機能を作成しました。あなたはビデオを見て(30時の時間にジャンプ)、彼がそれを間違ってやっているかどうかを確認できますか? –

2

コントローラは、で定義する必要があります。。あなたはあなたのアプリケーションでモジュールを定義していないので、あなたのコントローラは作成されていません(おそらくコンソールにこれを言っているエラーがあります)。ここで

あなたの問題を解決する方法である:

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

 
myApp.controller('SimpleController', function($scope) { 
 
    $scope.customers = [ 
 
     {name: 'Dave', city: 'London'}, 
 
     {name: 'Naww', city: 'Tokyo'}, 
 
     {name: 'Jim Do', city: 'ABX'}, 
 
     {name: 'Ben', city: 'Oslo'} 
 
    ]; 
 
});
<html data-ng-app="myApp"> 
 
    <head> 
 
     <title> Using AngularJS and etc</title> 
 
    </head> 
 
    <body data-ng-controller="SimpleController"> 
 
     Search by name: 
 
     <br/> 
 
     <input type="text" data-ng-model="name" /> 
 
     <br/> 
 
     <ul> 
 
     <li data-ng-repeat="cust in customers | filter: name"> {{ cust.name }} - {{ cust.city | uppercase }}</li> 
 
     </ul> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
    </body> 
 
</html>

関連する問題