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-click to change the application state.

Nancy Melucci
PLUS
Nancy Melucci
Courses Plus Student 36,143 Points
Posted by Nancy Melucci
Nancy Melucci
Courses Plus Student 36,143 Points

Why can I see {{todo. name}} in my UI and not the editable text?

Following the Angular tutorial and feel like I am understanding most of it. I am pretty frustrated with the fact that I can't make the expression {{todo.name}} be replaced by the changeable text.

This was also true in the code challenge. Even though I passed the challenge on the first try, when I previewed it, the {{todo.name}} was showing, not the editable item.

Could this be a browser issue? Or maybe something in a different file that I messed up?

I am not sure what code to attach. I'll try my index html for starters....

html

<!doctype html>
<html lang="en">
<head>
  <title>Angular Project</title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link href='styles/main.css' rel='stylesheet' type="text/css">
</head>
<body ng-app="todoListApp">

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

  <script src="vendor/angular.js" type="text/javascript"></script>
  <script src="scripts/app.js" type="text/javascript"></script>
</body>
</html>

1 Answer

Sergey Podgornyy
Sergey Podgornyy
20,660 Points
Sergey Podgornyy
Sergey Podgornyy
20,660 Points

As I can see in console (pressing Ctrl + Shift + J) files angular.js and app.js had not been created for this challenge. Just do not pay attention on this right now, you made everything right ;)