Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AngularJS Basics (1.x) Using Angular's Built In Directives Using ng-change To Set Data State

Posted by Sua Morales
Sua Morales
2,651 Points

can you just add variables to the scope in the html? I don't see a todo.edited variable in our js file?

He did this in one of the first angular videos, where he added todo.name to scope directly in the html.

Russell Cousineau
Russell Cousineau
1,541 Points

Yep! As long as todo is an object, Angular will add additional attributes to it for you when you do this.

Juan Ordaz
Juan Ordaz
12,012 Points
Juan Ordaz
Juan Ordaz
12,012 Points

I was confused too because I am new to angular. But if you watch the previous videos, the first video to be specific of this course, you will see how attributes are added, he is using ng-inspector Angular.js in the browser. It is a good tool you can use to see how Angular does it for you. It is hard to explain the why because that is angular's magic. In Rails, and other frameworks you have to create attributes for specific objects. Just remember experimenting is the best practice. don't be afraid if you get it wrong. I suggest that whatever he does in the videos, change the values of the variables, directives and you will see how it affect you project, it's a good way of learning.

Juan Ordaz
Juan Ordaz
12,012 Points
Juan Ordaz
Juan Ordaz
12,012 Points

I was confused too because I am new to angular. But if you watch the previous videos, the first video to be specific of this course, you will see how attributes are added, he is using ng-inspector Angular.js in the browser. It is a good tool you can use to see how Angular does it for you. It is hard to explain the why because that is angular's magic. In Rails, and other frameworks you have to create attributes for specific objects. Just remember experimenting is the best practice. don't be afraid if you get it wrong. I suggest that whatever he does in the videos, change the values of the variables, directives and you will see how it affect you project, it's a good way of learning.

Russell Cousineau
Russell Cousineau
1,541 Points

It is hard to explain the why because that is angular's magic

Actually this is just how JavaScript works. When you have an existing object, you can add any new attributes to it that you want.

If you want to see what I mean try opening your browser's console. On Windows it's F12, on a Mac it's Command + Option + i (then you might need to click "Console" too).

// this creates an object
> var a = {}
// this adds the attribute "b" to the object, with the value 3
> a.b = 3
> a
Object {b: 3}

If you're more used to Ruby, you might be interested to learn that you can also do this with functions. When you do, the function acts as a constructor for the object.

// this defines a new type of object called a Thing
> var Thing = function(b) { this.b = b; }
// this creates a new Thing assigned to "c"
> var c = new Thing(5)
// since we passed the value 5 to the Thing function, we set the attribute "b" of the Thing "c" to 5
> c
Thing {b: 5}
// this adds the attribute "d" to the Thing, with the value 6
> c.d = 6
> c
Thing {b: 5, d: 6}

But that doesn't really have anything to do with the original question... in the example, Angular was just assigning new attributes to an ordinary Javascript object when todo.edited was bound in the template.

1 Answer

Bappy Golder
Bappy Golder
13,449 Points
Bappy Golder
Bappy Golder
13,449 Points

Initially there is no existence of edited variable anywhere. However as soon as you edit an item angular creates a edited variable within the todo object. Now remember todo is an object/item of todos array.

You can check these within your ng-inspector

  • open up your ng-inspector and inspect the todos array
  • then check an item/object (without editing it). The first one for examle.

You'll notice there is not variable called edited

  • then edit it and watch happens. As soon as you edit it the new variable is created and assigned to true. Like the image below.

example

Ze Yang
Ze Yang
495 Points
Ze Yang
Ze Yang
495 Points

It didn't show "EDITED", but edited is true, just like yours. This is my code. I have no idea how to debug. Thanks ```<html lang="en"> <head> <title></title> <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <link href='style/main.css' rel='stylesheet' type="text/css"> </head> <body ng-app="todoListApp"> <h1 ng-click="helloWorld()">My Todo</h1> <div ng-controller="mainCtrl" class="list">

    <div  class="item"  ng-class="{'editing-item': editing,'edited':edited}" ng-repeat="todo in todos">
    <input ng-model="todo.completed" type="checkbox" />  
    <lable ng-hide="editing" ng-click="helloWorld()">{{todo.name}}</lable>
    <input ng-change="todo.edited=true;" ng-blur="editing=false;" ng-show="editing" ng-model="todo.name" class="editing-lable" type="text" />

    <div class="actions">
        <a href="" ng-click="editing=!editing">eidt</a>
        <a href="" ng-click="helloWorld()">save</a>
        <a href="" class="delete">delete</a>
    </div>
</div>
    {{todos}}
</div>

<script src="Vender/angular.js" type="text/javascript"></script>
<script src="scripts/app.js" type="text/javascript"></script>

<!-- <script src="scripts/hello-world.js" type="text/javascript"></script> --> </body> </html>