Приложение AngularJS работает неправильно

Я новичок в AngularJS. Я пытаюсь запустить простой пример из книги, но он работает неправильно, и я не могу понять, почему.Приложение AngularJS работает неправильно

Этот код работает отлично:

<html ng-app> 
<head> 
    <script src="angular.js"></script> 
    <meta charset="UTF-8"> 
    <title>Angular </title> 
</head> 
<body> 
    <div ng-controller="HelloController"> 
     <input ng-model="greeting.text"/> 
     <p>{{greeting.text}}, World!</p> 
    </div> 
    <script src="angular.js"></script> 
    <script> 
      function HelloController($scope) { 
       $scope.greeting = {text: 'Hello'}; 
      } 
    </script> 
</body> 
</html>

enter image description here

Но это код у меня возникли проблемы с

<html ng-app='myApp'> 
<head> 
    <title>Shopping Cart</title> 
    <script src="angular.js"></script> 
</head> 
<body ng-controller='CartController'> 
    <h1>Your Order</h1> 
    <div ng-repeat="item in items"> 
     <span>{{item.title}}</span> 
     <input ng-model="item.quantity"> 
     <span>{{item.price| currency}}</span> 
     <span>{{item.price * item.quantity| currency}}</span> 
     <button ng-click="remove($index)">Remove</button> 
    </div> 
    <script src="angular.js"></script> 
    <script> 
       function CartController($scope) { 
        $scope.items = [ 
         {title: 'Paint pots', quantity: 8, price: 3.95}, 
         {title: 'Polka dots', quantity: 17, price: 12.95}, 
         {title: 'Pebbles', quantity: 5, price: 6.95} 
        ]; 
        $scope.remove = function(index) { 
         $scope.items.splice(index, 1); 
        }; 
       } 
    </script> 
</body> 
</html>

Ожидая этот вывод:

enter image description here

Но получить этот результат:

enter image description here

Я не понимаю, почему я не получаю выходные данные, и почему это не повторять. В принципе, почему пример не запущен. Я копирую и вставляю код прямо из книги.

источник

2013-10-25 Paul Samsotha

Что вы хотите сказать о angular.js дважды? –

переместите код контроллера из контроллера –

Удалите имя приложения из 'ng-app' или запустите инструкцию' .configure' перед вашим контроллером. Кроме того, проверьте свою консоль, там, скорее всего, хорошая описательная ошибка. – tymeJV

Когда вы пишете ng-app='myApp' вы говорите угловом, что существует модуль с именем myApp где-то.

Просто добавьте эту строку перед определением контроллеров:

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

Вы можете увидеть документы here и here

источник

2013-10-25 13:22:58 Beterraba

Вы должны определить свой myApp модуль:

<html ng-app='myApp'> 
<head> 
    <title>Your Shopping Cart</title> 
</head> 
<body ng-controller='CartController'> 
    <h1>Your Order</h1> 
    <div ng-repeat='item in items'> 
     <span>{{item.title}}</span> 
     <input ng-model='item.quantity'> 
     <span>{{item.price | currency}}</span> 
     <span>{{item.price * item.quantity | currency}}</span> 
     <button ng-click="remove($index)">Remove</button> 
    </div> 
    <script src="lib/angular.js"></script> 
    <script> 
     var app = angular.module('myApp', []); 
     app.controller('CartController', ['$scope', function($scope) { 
      $scope.items = [ 
       {title: 'Paint pots', quantity: 8, price: 3.95}, 
       {title: 'Polka dots', quantity: 17, price: 12.95}, 
       {title: 'Pebbles', quantity: 5, price: 6.95} 
      ]; 
      $scope.remove = function(index) { 
       $scope.items.splice(index, 1); 
      } 
     }]); 
    </script> 
    </body> 
</html>

источник

2013-10-25 13:22:41 Prateek

Я не уверен, но в том числе 'angular.js' только один раз может помочь. – TheHippo

Или вы можете также добавить пространство имен:

<html lang="en" ng-app="myapp" xmlns:ng="http://angularjs.org">

Даже хотя, добавление модуля - лучший способ.

источник

2014-03-25 07:05:52 Roisgoen

Укажите имя приложения как html ng-app = "myapp" в html-файле, а затем добавьте/определите модуль в контроллер как var myapp = angular.module ('myapp', []);

источник

2014-04-02 21:06:08 Sfoorti

Даже я столкнулся с этой проблемой, разрешил ее, вызвав область создания модуля перед контроллером js. Также убедитесь, что модуль создан в файле сценария или js.

источник

2014-07-30 06:46:59 Stackhelper

я исправлен.

<html ng-app="myApp"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Shopping Cart</title> 
<script src="angular-1.5.3/angular.js"></script> 
<script> 
var myApp = angular.module('myApp',[]) 

myApp.controller('CartController', function($scope) { 
      $scope.items = [ 
      {title: 'Paint pots', quantity: 8, price: 3.95}, 
      {title: 'Polka Dots', quantity: 17, price: 12.95}, 
      {title: 'Pebbles', quantity: 5, price: 6.95} 
     ]; 

    $scope.remove = function(index){ 
     $scope.items.splice(index, 1); 
    }; 
}); 
</script> 
</head> 
<body ng-controller="CartController"> 
<h1>Your order</h1> 

<div ng-repeat="item in items"> 
    <span>{{item.title}}</span> 
    <input ng-model="item.quantity" /> 
    <span>{{item.price | currency}}</span> 
    <span>{{item.price * item.quantity | currency}}</span> 
    <button ng-click="remove($index)">Remove</button> 
</div> 
</body> 
</html>

источник

2016-04-07 14:19:34 MichaelHasfel

Приложение AngularJS работает неправильно

ответ

Смежные вопросы