-1

モジュール、コントローラー、およびビューを使用して、基本的な Angular アプリを確立しようとしています。「{{}}」内のコンテンツを解釈する角度を取得するのに苦労しています。

すべてを「./js/bundle.js」にプッシュするBrowserifyを実行しています。

これが私のコードです：

index.html

<!DOCTYPE html>
<html ng-app="showNames">
<head>
    <script src="./js/bundle.js"></script>
    <title> Help </title>
</head>

 <body>
    <h1>Show Those Names</h1>
      <ul ng-controller="namesController as namesCtrl">        
        <li ng-repeat="name in namesCtrl">{{name.names}}</li>  
      </ul>     
 </body>

</html>

app.js

"use strict";

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

app.controller('namesController', ['$scope', function($scope){
        $scope.names = ["jeff", "jim", "jay", "Please show up"];
 }]);

私のブラウザは {{name.names}} しか表示しません。

ここで何が起こっているのか、何が欠けているのか、またはアプローチを改善する方法はありますか?

ありがとう！

4

4 に答える 4

0

ng-repeat の使い方が間違っています。

<li ng-repeat="name in names">{{ name }}</li>

于 2016-10-21T01:15:13.943 に答える
0

あなたのコードは混乱しています。

  1. コントローラーはnamesCtrlテンプレートのように参照されますが、に割り当てnamesます$scope。1 つのアプローチを選択し、それに固執する
  2. あなたは繰り返していnamesCtrlますか？
  3. name配列エントリは文字列のみで、プロパティはありません

使用$scope...

<ul ng-controller="namesController">        
    <li ng-repeat="name in names track by $index">{{name}}</li>  
</ul>

または「コントローラーとして」を使用します

app.controller('namesController', function() {
    this.names = ["jeff", "jim", "jay", "Please show up"];
});

と

<ul ng-controller="namesController as namesCtrl">        
    <li ng-repeat="name in namesCtrl.names track by $index">{{name}}</li>  
</ul>
于 2016-10-21T01:15:25.203 に答える
0

コードを変更しました。複数の間違いがあります。これを試して

<!DOCTYPE html>
<html ng-app="showNames">
<head>
<script src="./js/bundle.js"></script>
<title> Help </title>
</head>

<body>
 <div ng-controller="namesController as namesCtrl">
  <h1>Show Those Names</h1>
    <ul>        
      <li ng-repeat="name in names">{{name}}</li>  
    </ul> 
 </div>    
</body>

</html>

あなたの app.js は問題ありません。bundle.jsにプッシュされていることを願っています

于 2016-10-21T04:55:11.487 に答える
0

問題は、ng-repeat でコントローラーから名前を取得しようとしていることです。コントローラーの一部であるモデルを使用する必要があります。つまり、「namesCtrl の名前」ではなく「名前の名前」です。 

"use strict";

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

app.controller('namesController', ['$scope', function($scope){
        $scope.names = ["jeff", "jim", "jay", "Please show up"];
 }]);
<!DOCTYPE html>
<html ng-app="showNames">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <title> Help </title>
</head>

 <body>
    <h1>Show Those Names</h1>
      <ul ng-controller="namesController as namesCtrl">        
        <li ng-repeat="name in names">{{name}}</li>  
      </ul>     
 </body>

</html>

于 2016-10-21T05:24:57.270 に答える