user6680 user6680 - 5 months ago 8
AngularJS Question

AngularJS todoapp displaying as the variable name in webpage

I'm following a tutorial online, but when I refresh my browser I get {{todo.title}} and the checkbox doesn't put a line through the text if clicked.
Any ideas why. I don't see anything different from my code and the video I'm following.

<!doctype html>
<html lang="en" ng-app="ToDo">
<head>
<meta charset="UTF-8">
<title>todo</title>
<style>
.done{text-decoration: line-through;color:#ccc;}
</style>
</head>
<body>
<div ng-controller='todoController'>
<form name="frm" ng-submit="addTodo()">
<input type="text" name = "newtodo" ng-model="newtodo" required>
<button ng-disabled="frm.$invalid">Go</button>

</form>
<button ng-click="clearCompleted()">Clear Completed</button>

<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done" />
<span ng-class="{'done': todo.done}">{{todo.title}}</span>

</li>
</ul>
</div>
<script scr="bower_components/angular/angular.min.js"></script>
<script>
angular.module('ToDo', []).
controller('todoController', ['$scope', function($scope){
$scope.todos = [
{'title': 'Build a todo app', 'done':false}

];
$scope.addTodo = function(){}
$scope.clearCompleted = function(){}


}]);
</script>


</body>
</html>

Answer

Please include angularjs file like below. because u not included path of AngularJS Library

<head>
<meta charset="UTF-8">
<title>todo</title>
<style>
.done{text-decoration: line-through;color:#ccc;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>