Question

我第一次尝试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>

Answer 1

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

HTH！

Answer 2

you have not define the controller such as

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

/// than you can call controller to the view such as below code :

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

Live Example you can access by this link : http://jsfiddle.net/9yHjj/

Answer 3

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

<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>

Answer 4

<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>

此代码应该可以使用

为什么angularjs ng-repeat不起作用

4 个答案: