为什么 angularjs ng-repeat 不起作用答案

【问题标题】：why angularjs ng-repeat not working为什么 angularjs ng-repeat 不起作用
【发布时间】：2013-08-14 20:49:26
【问题描述】：

我是第一次尝试 AngularJS 的基础知识。我第一次尝试 ng-repeat。但是它不起作用。

这是一个不工作的jsfiddle。

我已将代码编写在单个独立的 HTML 文件中，如下所示，并且 angular.js 文件位于同一目录中

<html ng-app> 
<head>
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript">
        var users = [
                      {
                          name:"Mahesh",
                          description:"A geek",
                          age:"22"
                      },
                      {
                          name:"Ganesh",
                          description:"A nerd",
                          age:"25"
                      },
                      {
                          name:"Ramesh",
                          description:"A noob",
                          age:"27"
                      },
                      {
                          name:"Ketan",
                          description:"A psychopath",
                          age:"26"
                      },
                      {
                          name:"Niraj",
                          description:"Intellectual badass",
                          age:"29"
                      }
                    ];
    </script>       
</head> 
<body>
    <div>
        <div data-ng-repeat="user in users">
            <h2>{{user.name}}</h2>
            <div>{{user.description}}</div>
        </div>
    </div>
</body>
</html>

【问题讨论】：

你还没有定义控制器比如 myapp.controller("AppController",function($scope){ $scope.users=[ { name:"Mahesh", description:"A geek" } , ]; }); /// 你可以调用控制器到视图，例如下面的代码：

{{user.description}}

标签： javascript html angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

users 必须引用在当前范围内可访问的属性。范围是 AngularJS 将数据从 HTML 绑定到 HTML 的方式。这在second tutorial page 的“模型和控制器”一章中有进一步的解释。查看您的 Fiddle here 的工作版本。

HTH！

【讨论】：

【解决方案2】：

你的代码应该是这样的......

<html ng-app="app">
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
var app = angular.module("app",[]).controller(AppController,["$scope",function($scope){
 $scope.users=[
                      {
                          name:"Mahesh",
                          description:"A geek",
                          age:"22"
                      },
                      {
                          name:"Ganesh",
                          description:"A nerd",
                          age:"25"
                      },
                      {
                          name:"Ramesh",
                          description:"A noob",
                          age:"27"
                      },
                      {
                          name:"Ketan",
                          description:"A psychopath",
                          age:"26"
                      },
                      {
                          name:"Niraj",
                          description:"Intellectual badass",
                          age:"29"
                      }
                    ];
}])
    </script>       
</head>
<body ng-controller="AppController">
    <div>
        <div data-ng-repeat="user in users">
            <h2>{{user.name}}</h2>
            <div>{{user.description}}</div>
        </div>
    </div>
</body>
</html>

【讨论】：

【解决方案3】：

<html ng-app="myapp1">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var myapp = angular.module("myapp1",[]);
myapp.controller("AppController",function($scope){
 $scope.users=[
                      {
                          name:"Mahesh",
                          description:"A geek",
                          age:"22"
                      },
                      {
                          name:"Ganesh",
                          description:"A nerd",
                          age:"25"
                      },
                      {
                          name:"Ramesh",
                          description:"A noob",
                          age:"27"
                      },
                      {
                          name:"Ketan",
                          description:"A psychopath",
                          age:"26"
                      },
                      {
                          name:"Niraj",
                          description:"Intellectual badass",
                          age:"29"
                      }
                    ];
});
    </script>       
</head>
<body ng-controller="AppController">
    <div>
        <div data-ng-repeat="user in users">
            <h2 ng-bind="user.name"></h2>
            <div>{{user.description}}</div>
        </div>
    </div>
</body>
</html>

这段代码应该可以工作

【讨论】：

【解决方案4】：

你还没有定义控制器比如

myapp.controller("AppController",function($scope){
 $scope.users=[
                      {
                          name:"Mahesh",
                          description:"A geek"
                      },
                    ];
});

/// 你可以调用控制器到视图，例如下面的代码：

<body ng-controller="AppController">
    <div><div data-ng-repeat="user in users">
            <h2>{{user.name}}</h2>
            <div>{{user.description}}</div>
        </div>
    </div>
</body>

您可以通过此链接访问实时示例：http://jsfiddle.net/9yHjj/

【讨论】：