Question

所以我现在刚刚开始进入angularJS，测试的情况很好，直到我开始使用带有ng-repeat的控制器。似乎当我使用它时它只是没有连接到控制器。

我检查了一切。范围很好，angular.js库的位置很好但列表不会出于某种原因。这甚至发生在一些复制粘贴示例中，因为我拿这些看看我想出的是否有错误，也使用了旧版本的库，效果相同，没有任何内容放在列表中。

<html ng-app>
<head>
<script src="lib/angular.min.js"></script>
</head>
<body>
    <div class="contrainer" ng-controller="SimpleController">
        <h3>Simple Controller Test</h3>
        <br />
        Name:
        <br />
        <input type="text" ng-model="name" />
        <ul>
            <li ng-repeat="chara in characters">
                {{chara.name}} - {{chara.location}}
            </li>
        </ul>
    </div>
    <script>
    function SimpleController($scope) {

        $scope.characters = [
            {name: 'Link', location: 'Hyrule'},
            {name: 'Pit', location: 'Angel Land'},
            {name: 'Samus', location: 'Brinstar'}
            {name: 'Takamaru', location: 'Japan'}
        ];
    }
    </script>
</body>
</html>

Answer 1

这里有些不对劲：

1）定义列表时语法无效。在第3项之后缺少逗号。

  $scope.characters = [
        {name: 'Link', location: 'Hyrule'},
        {name: 'Pit', location: 'Angel Land'},
        {name: 'Samus', location: 'Brinstar'},
        {name: 'Takamaru', location: 'Japan'}
    ];

2）您没有按照您选择代表每个字符的名称来引用字符。

   <li ng-repeat="character in characters">
       {{character.name}} - {{character.location}}
   </li>

Answer 2

将ng-controller指令放在<li>标记中。

  <ul>
        <li ng-repeat="chara in characters" ng-controller="SimpleController">
            {{chara.name}} - {{chara.location}}
        </li>
    </ul>

AngularJS - 使用控制器时停止工作

2 个答案: