Question

我最近开始学习angularjs，尝试不同的例子。

由于某些原因，ng-repeat不起作用

感谢任何帮助。

    <!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <script data-require="angular.js@*" data-semver="2.0.0-alpha.31" src="https://code.angularjs.org/2.0.0-alpha.31/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
var app = angular.module('myapp', []);
app.controller('myCtrl', function ($scope) {

    $scope.fname = "joe";
    $scope.lname = "mathew";
    $scope.fullname = function () {
        return $scope.fname + " " + $scope.lname;
    }

});
    </script>
  </head>

  <body>
    <div ng-controller="myCtrl" ng-app="myapp">
        First name :       <input type="text" ng-model="fname" />
      <br />

        Last name :       <input type="text" ng-model="lname" />
      <br />
      <br />

        Full name : {{fname + " " + lname}}
    </div>
    <div>
      <ul ng-controller="namesctrl" ng-app="myapp2">
        <li ng-repeat="item in names">
                {{ item.name + ', ' + item.country }}
            </li>
      </ul>
      <script>
            var myapp2 = angular.module('myapp2', []).controller('namesctrl', ["$scope", function ($scope) {
                $scope.names = [
                    { name: 'Jani', country: 'Norway' },
                    { name: 'Hege', country: 'Sweden' },
                    { name: 'Kai', country: 'Denmark' }
                ];
            }]);
        </script>
    </div>
  </body>

</html>

当我运行上面的例子时，我看到下面的输出

{{ item.name + ', ' + item.country }}

但不是完整列表。

Answer 1

ng-repeat没有任何问题。我在这篇文章中修改了你的代码：http://plnkr.co/edit/nmkB4dZEC1YSLMiK4RXf?p=preview

我所做的改变包括：

var app = angular.module('myapp', []);
app.controller('myCtrl', function ($scope) {

    $scope.fname = "joe";
    $scope.lname = "mathew";
    $scope.fullname = function () {
        return $scope.fname + " " + $scope.lname;
    }

});
app.controller('namesctrl', function ($scope) {
          $scope.names = [
              { name: 'Jani', country: 'Norway' },
              { name: 'Hege', country: 'Sweden' },
              { name: 'Kai', country: 'Denmark' }
          ];
      });

有关详细参考，请参阅：

AngularJS Multiple ng-app within a page

Answer 2

您需要使用两个来自动引导第二个ng-app。并为其分配任何id并按如下方式引导它

angular.bootstrap（的document.getElementById（ “应用2”），[ 'myapp2']）;

请检查下面的插件

ng-repeat不按预期工作

2 个答案: