Блог

Главная - Вопросы по программированию - Что не так с моим угловым кодом?

Что не так с моим угловым кодом?

#angularjs

#angularjs

Вопрос:

 <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] Аргумент ‘ItemController’ не является функцией, не определен.

Комментарии:

1. Вы должны определить переменную перед ее использованием или назначением.

Ответ №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;
    });  
})

ДЕМОНСТРАЦИЯ

Ответ №2:

Это ваш рабочий код — в thin plunker

HTML-КОД:

 <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;
    });
})();

Ответ №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>