AngularJS ng-repeat不显示项目

时间:2016-02-17 16:29:22

标签: html angularjs

今天我开始摆弄AngularJS上学。我几乎立刻遇到了一个我无法解决的问题,互联网上的解决方案对我没有帮助。

我使用角度种子项目作为我项目的骨架。

这会产生两个特别的文件:app.js和view1.js,它们包含我在view1.html中使用的控制器。

我的想法是,我需要一个可以在多个视图上全局使用的项目数组,因此不一定只在视图1上。

我制作了一个带有以下内容的controllers.js:

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



todoAppControllers.controller('CarListController', ['$scope', '$http',
  function($scope, $http) {

    $scope.cars = [
      {merk:'volkswagen', model : 'Up'},
      {merk:'volkswagen', model : 'Golf'}
      ];

  }]);

我的html在主index.html上看起来像这样(我已经省略了一些不相关的代码):

<html lang="en" ng-app="carApp" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My AngularJS App</title>
</head>
<body>
  <ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>

  <div ng-view></div>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="controllers.js"></script>
  <script src="view1/view1.js"></script>
  <script src="view2/view2.js"></script>
</body>
</html>

我的app.js:

'use strict';

// Declare app level module which depends on views, and components
angular.module('carApp', [
  'ngRoute',
  'carApp.view1',
  'CarControllers'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

最后是我想要显示我的汽车列表的页面。这不是一个部分观点:

<p>Cars:</p>
<ul ng-controller="CarListController">
    <li ng-repeat"car in cars">{{car.merk}} model: {{car.model}}</li>
</ul>

当我运行npm并转到应用程序时,我只看到一个带有模型的子弹点(列表项):(因此没有merk是荷兰的品牌,也不是car.model。)

我该如何解决这个问题?提前致谢

1 个答案:

答案 0 :(得分:1)

你有这个:

<li ng-repeat"car in cars">

你错过了一个相同的符号:

<li ng-repeat="car in cars">