Question

<body>
<div data-ng-controller="itemController as store">
    <ul class="list-group">
        <li class="list-group-item" data-ng-repeat="product in store.product.names">
            <h3>{{store.product.name}}
                <em class="pull-right">{{store.product.price}}</em>
        </h3>
        </li>
    </ul>
</div>
<script type="text/javascript">
(function() {
    var app = angular.module('store', []);
    app.controller('itemController', function($scope) {
        $scope.product = gem;
    });

    var gem = [{
        name: 'Item1',
        price: 15
    }, {
        name: 'Item2',
        price: 16
    }, {
        name: 'Item3',
        price: 17
    }, {
        name: 'Item4',
        price: 18
    }, {
        name: 'Item5',
        price: 19
    }];
})();
</script>
<!-- <script src="jquery.js"></script>-->
<script src="app.js"></script>

在我的浏览器上查看页面并检查控制台页面后，我收到了此错误消息

错误：[ng：areq] Argument＆＃39; itemController＆＃39;不是一个功能，未定义。

Answer 1

像这样更改你的ng-repeat，

<div data-ng-controller="itemController">
    <ul class="list-group">
        <li class="list-group-item" data-ng-repeat="product in products">
            <h3>{{product.product.name}}
                <em class="pull-right">{{product.price}}</em>
        </h3>
        </li>
    </ul>
</div>

控制器：

var app = angular.module('store', []);
    app.controller('itemController', function($scope) {
     var gem = [{
        name: 'Item1',
        price: 15
    }, {
        name: 'Item2',
        price: 16
    }, {
        name: 'Item3',
        price: 17
    }, {
        name: 'Item4',
        price: 18
    }, {
        name: 'Item5',
        price: 19
    }];
        $scope.products = gem;
    });  
})

<强> DEMO

Answer 2

这是您的工作代码 - In thin plunker

HTML CODE：

<div data-ng-controller="itemController">
      <ul class="list-group">
          <li class="list-group-item" data-ng-repeat="item in product">
              <h3>{{item.name}}
              <em class="pull-right">{{item.price}}</em>
          </h3>
          </li>
      </ul>
  </div>

在控制器中：

//代码在这里

(function(){
   var app = angular.module('store', []);
    app.controller('itemController', function($scope) {
      $scope.hello = 'hello';
        var gem = [{
            name: 'Item1',
            price: 15
        }, {
            name: 'Item2',
            price: 16
        }, {
            name: 'Item3',
            price: 17
        }, {
            name: 'Item4',
            price: 18
        }, {
            name: 'Item5',
            price: 19
        }];
        $scope.product = gem;
    });
})();

Answer 3

您不应将product.names与ng-repeat一起使用。

尝试以下代码：

<body>
<div data-ng-controller="itemController as store">
    <ul class="list-group">
        <li class="list-group-item" data-ng-repeat="product in products">
            <h3>{{product.name}}
                {{product.price}}
        </h3>
        </li>
    </ul>
</div>
<script type="text/javascript">
(function() {
    var app = angular.module('store', []);
    app.controller('itemController', function($scope) {
        $scope.products = gem;
    });

    var gem = [{
        name: 'Item1',
        price: 15
    }, {
        name: 'Item2',
        price: 16
    }, {
        name: 'Item3',
        price: 17
    }, {
        name: 'Item4',
        price: 18
    }, {
        name: 'Item5',
        price: 19
    }];
})();
</script>
<!-- <script src="jquery.js"></script>-->
<script src="app.js"></script>

我的角度代码有什么问题？

3 个答案: