-1

我正在尝试使用模块、控制器和视图建立一个基本的 Angular 应用程序。我很难从角度解释“{{}}”中的内容。

我正在运行 Browserify，它将所有内容推送到“./js/bundle.js”。

这是我的代码：

索引.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>

应用程序.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. 选择一种方法并坚持下去
  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 中，您试图从控制器中获取名称，您应该使用作为控制器一部分的模型，即：“name in names”而不是“name in 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 回答