My AngularJS code doesn't work

Question

I am learning AngularJS and ended up with the following code for ToDoList basic app. I viewed it in a browser it didn't work. I am new to the Angular and mightn't get obvious things, so I thought if my app name is

todoApp

Then I should put

$scope.todoApp

instead of

$scope.todo

but turned out that's not an issue.

  <!DOCTYPE html>
  <html ng-app="todoApp">
  <head>
    <title>To DO List</title>
    <link href="bootstrap.css" rel="stylesheet">
    <link href="bootstrap-theme.css" rel="stylesheet>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript">
         var model = {
             user: "Adam",
             items: [{ action: "Buy flowers", done: false },
                    { action: "Get Shoes", done: false },
                    { action: "Collect Tickets", done: true },
                    { action: "Call Joe", done: false }]
            };
         var todoApp = angular.module("todoApp", []);

         todoApp.controller("ToDoCtrl", function($scope) {
            $scope.todo = model;
          });
    </script>
  </head>
 <body ng-controller="ToDoCtrl">
   <div class="page-header">
     <h1>
        {{todo.user}}'s To Do List
        <span class="label label-default">{{todo.items.length}}</span>
     </h1>
   </div>
  <div class="panel">
    <div class="input-group">
        <input class="form-control" />
        <span class="input-group-btn">
            <button class="btn btn-default">Add</button>
        </span>
    </div>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Description</th>
                <th>Done</th>
            </tr>
        </thead>
        <tbody>
             <tr ng-repeat="item in todo.items">
                <td>{{item.action}}</td>
                <td><input type="checkbox" ng-model="item.done" /></td>
                <td>{{item.done}}</td>
             </tr>
          </tbody>
        </table>
     </div>
   </body>
</html>

That's what I get in a browser..

And that's what I guess I am supposed to get...

Why it doesn't work?

Any error in console?? You are missing " in style sheet.

Manwal
– Manwal

2015-09-25 16:05:58 +00:00
Commented Sep 25, 2015 at 16:05 — Manwal
– Manwal, Commented Sep 25, 2015 at 16:05
SO try toDoApp instead

PeonProgrammer
– PeonProgrammer

2015-09-25 16:08:02 +00:00
Commented Sep 25, 2015 at 16:08 — PeonProgrammer
– PeonProgrammer, Commented Sep 25, 2015 at 16:08

Manwal · Accepted Answer · 2015-09-25 16:13:41Z

2

Your HTML getting invalid because you are missing " in link tag's rel attribute. Here you are missing:

<link href="bootstrap-theme.css" rel="stylesheet>
                                                ^ ==> missing "

Working DEMO /* updated css */

Have a look at Invalid HTML in DEMO. Here you can see after link tag HTML is colored green.

edited Sep 25, 2015 at 16:13

answered Sep 25, 2015 at 16:08

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

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

1 Comment

Manwal Over a year ago

Yep @AlexandraProdan. This is also important aspect.

Collectives™ on Stack Overflow

My AngularJS code doesn't work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest