Audio problem

In the meantime, there's two pieces of code that he's going to change in this video that are needed to go to the next video.

First, and this is out of order from what he's showing in the lesson, since I can't hear him, is that he's commenting out the last three CSS rules that are hiding the checkbox. Go ahead and comment these out for now, as we'll be working on the checkbox in the next video, and we're going to want to be able to see it for now:

/* comment these out in main.css */

/*input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(checkbox-empty.svg) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + span {
    background:url(checkbox-filled.svg) left top no-repeat;
}*/

We're doing this because he's demonstrating the ng-model directive, which allows us to attach a variable to a particular element for two-way data binding. Now he's going to add that directive as a tag attribute to our checkbox:

<!--partial code from index.html-->

<div ng-controller="mainCtrl" class="list">
      <h1 ng-click="helloWorld()">My TODO's</h1>
      <input ng-model="todo.completed" type="checkbox"/><!--he adds ng-model here-->

when he does that, he's binding the state of a new variable, todo.completed (this is a namespaced variable, so completed is a property of todo, both of which are created here) to the clicked or unclicked state of the checkbox. You can go into the ng-inspector and click the checkbox to see the state change from false to true and back again. Keep in mind that since we create this variable in the HTML markup, you have to click the checkbox before the variable and it's state are actually created. If we wanted that variable to exist when we create the entire app, we would have to declare it in the controller, not in the markup, but I don't think he goes over this here and he'll bring it up later.

The other thing we're going to do is add an ng-model attribute to our text input tag, and an expression (I'll explain in a second) to the body of the label tag for that text input, which looks like this:

<label class="editing-label" ng-click="helloWorld()">
       {{todo.name}}</label><!--Here he's replaced "A sample todo" in the body with an expression-->
      <input ng-model="todo.name" class="editing-label" type="text"/><!--Here he put an ng-model attribute with the same variable name-->

The new ng-model attribute on the text input binds the value of the text input to the namespaced variable todo.name (notice that he's namespacing all of this with dot notation off of the todo variable. It's a best practice to generally namespace most variables inside an angular app, this will help with tracking scope later on). The expression, which occurs in the body of the label element, is taking the value of todo.name and filling it into the body of the element (we use brackets to do this when inside the body of an element, this is called an expression). So when we type a value into the text input, the label changes in real-time because of angular's two way data binding updating the todo.name variable in all the places that it occurs within the scope of this controller. In the end, the HTML markup will look like this:

<div ng-controller="mainCtrl" class="list">
      <h1 ng-click="helloWorld()">My TODO's</h1>
      <input ng-model="todo.completed" type="checkbox"/>
      <label class="editing-label" ng-click="helloWorld()">
        {{todo.name}}</label>
      <input ng-model="todo.name" class="editing-label" type="text"/>
      <div class="actions">
        <a href="">edit</a>
        <a href="" ng-click="helloWorld()">save</a>
        <a href="" class="delete">delete</a>
      </div>
    </div>

Go ahead and copy and paste that into your code, replacing the old section we had, as well as comment out the aforementioned CSS rules, and you'll be all set for the next video. I hope this helps anyone in the meantime, while they update the audio, and Happy Coding!

Nicolas

I sent a couple fixes to the Treehouse twitter account, as I too have the wrong audio cutting in at 2:05. It's a few hours into the first day of the class, an error or two is reasonable. Still miles ahead of the previous course.

For me too, and also the ng-change quiz is before the ng-change video.

Same here.

+1

same

thanks for writing this up and walking us through it! much appreciated