AngularJS：为什么ng-repeat不起作用？

Please look at the following code:

请查看以下代码：

<html lang="en" >
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

<body ng-app="flexbox" >

    <div id="wrapper" ng-controller="flex-ctrl as ctrl">
      <div id="aside">
        <p ng-repeat="item in ctrl.buttons"> {{item}} </p>
      </div>
  </div>
</body>
</html>


var app = angular.module("flexbox", []);
app.controller("flex-ctrl", ['$scope', function($scope) {
  $scope.buttons = ['a','b', 'c'];
}]);

I expect to see three <p> items. However, it looks like ng-repeat is ignored and I see an empty page.

我希望看到三个

项目。但是，看起来ng-repeat被忽略了，我看到一个空页面。

Do you know what is the problem?

你知道这是什么问题吗？

For your convenience: http://codepen.io/CrazySynthax/pen/yVwWdo

为方便起见：http：//codepen.io/CrazySynthax/pen/yVwWdo

3 个解决方案

#1

Use this.buttons instead of $scope.buttons since you are using controller as syntax

因为您使用控制器作为语法，所以使用this.buttons而不是$ scope.buttons

var app = angular.module("flexbox", []);
app.controller("flex-ctrl", ['$scope', function($scope) {
  this.buttons = ['a','b', 'c'];
}]);

<!DOCTYPE html>
<html>
<head>
   <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
</head>
<body ng-app='flexbox'>
    <div id="wrapper" ng-controller="flex-ctrl as ctrl">
      <div id="aside">
        <p ng-repeat="item in ctrl.buttons"> {{item}} </p>
      </div>
  </div>
</body>
</html>

#2

Since you are using controller as syntax you can change your ctrl like so:

由于您使用控制器作为语法，您可以像这样更改您的控制：

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

app.controller("flex-ctrl", [function() {
  var vm = this;
  vm.buttons = ['a','b', 'c'];
}]);

hope it helps.

希望能帮助到你。

#3

Your variable is in $scope, so you can just loop over it with:

你的变量在$ scope中，所以你可以用它来循环：

<p ng-repeat="item in buttons"> {{item}} </p>

Instead of

代替

<p ng-repeat="item in ctrl.buttons"> {{item}} </p>

Forked your Codepen here.

在这里分叉你的Codepen。

#1