Question

我有以下代码，假设在'SimpleController'中显示所有产品。但它不起作用，它不显示产品。

<div data-ng-controller="SimpleController">

    <ul>
        <li data-ng-repeat="product in products">
            {{product.productname}}
        </li>
    </ul>
</div>

<script src="angular.min.js"></script>

<script>
    function SimpleController($scope)
    {
        $scope.products = [
            {productname:'ariel',price:'7.50'},
            {productname:'tinahpa',price:'12.00'},
            {productname:'breadbreast',price:'2.00'}
        ];
    }
</script>

Answer 1

它工作正常我想你只是忘了设置ng-app。试试这个......

DEMO

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>


  <!-- You need to give the ng-app directive the name of your app -->
  <!-- You could also put it in the opening HTML tag -->

  <body ng-app="foo">
    <div data-ng-controller="SimpleController">

        <ul>
            <li data-ng-repeat="product in products">
                {{product.productname}}
            </li>
        </ul>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>


    <script> 

       var app = angular.module('foo', []);

        app.controller('SimpleController', SimpleController);

        function SimpleController($scope)
        {
            $scope.products = [
                {productname:'ariel',price:'7.50'},
                {productname:'tinahpa',price:'12.00'},
                {productname:'breadbreast',price:'2.00'}
            ];
        }
    </script>
  </body>

</html>

Answer 2

您似乎没有在视图中的任何位置声明应用模块（ng-app）。

您还需要将控制器传递给angular.module（）的控制器函数。

AngularJS控制器无法显示

2 个答案: