angular not 2-way binding

Question

Trying to teach myself AngularJS and am stuck on a tutorial trying to build a simple shopping cart. I cannot for the life of me figure out why my {{}} angular tags are not displaying the data in the view, rather they are displaying the literal string (i.e. {{item.price | currency}}) Any insights? I'm worried the code isn't referencing the angular library, but the source is correct - the library is saved as angular.min.js .

Please help!

`

<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 type="text/javascript" src="angular.min.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>`

any console errors?, if using chrome pres f12 and look for any errors in console — bto.rdz
– bto.rdz, Commented Sep 8, 2014 at 3:30
As bto.rdz asked. Please look for error in chrome debugger. I would say you have not define your Angular app module, while you are calling ng-app='myApp' at top. Trying putting only "ng-app" and see if the problem is solved. — MikeNQ
– MikeNQ, Commented Sep 8, 2014 at 3:33
Seems to be working fine here plnkr.co/edit/Em4KhNGa4f7zGwcbm1B4?p=preview — user3991493
– user3991493, Commented Sep 8, 2014 at 3:34
global controller functions are not supported anymore in v1.3 of angular. XrXrXr is correct. Register your controller function instead. — Michael Kang
– Michael Kang, Commented Sep 8, 2014 at 4:05

Meligy · Accepted Answer · 2014-09-08 17:27:36Z

2

When you set a value to ng-app (like ng-app="MyApp"), Angular.JS will expect you to have something like var myModule = angular.module("MyApp", []).

It will look for controllers only inside that, using myModule.controller() method (or can be directly after the module call). A global function will not work.

So, you have 2 options:

Replace <html ng-app="MyApp"> with <html ng-app>

Creating a module:

angular.module("MyApp", []).controller("CartController", function($scope) {
    /// ...
});

Note that if you are using Angular.JS 1.3, you have to use method 2, as the global scope function way was removed in that version.

edited Sep 8, 2014 at 17:27

answered Sep 8, 2014 at 4:14

Meligy

36.7k11 gold badges90 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3133810 Over a year ago

I am using 1.2.23. I changed <html ng-app="MyApp> and it worked! I am confused as to why it didn't work initially. Any idea what is wrong with their code or if I missed something?

Meligy Over a year ago

Another answer here suggested a particular book mentioned that it will not initialise the app in every example. This might be the reason

XrXr · Accepted Answer · 2014-09-08 03:37:25Z

1

It is because CartController is just a plain function. You have to add it as a controller under the myApp module

angular.module("maApp", []).
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);
        }
})

answered Sep 8, 2014 at 3:37

XrXr

2,0671 gold badge14 silver badges22 bronze badges

Comments

Sudarshan Kalebere · Accepted Answer · 2014-09-08 05:14:09Z

1

I think you are trying this example from Angularjs Book, in which they have clearly mentioned that we are not initializing app for every example, you need to initialize your app. or simply ignore app, start coding from controller. when you mention ng-app="sample" you need to bootstrap that in order to work with controllers directives and everything that you use. In case if you dont want to initialize then you can simply leave ng-app="" blank. Here is working example [fiddle][1]

 [1]: http://jsfiddle.net/kaLropns/

edited Sep 8, 2014 at 5:14

answered Sep 8, 2014 at 5:06

Sudarshan Kalebere

3,9473 gold badges36 silver badges66 bronze badges

Collectives™ on Stack Overflow

angular not 2-way binding

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related