Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
JSApps 101: Basic AngularJS Data Binding
var toDoListApp = angular.module('ToDoListApp', []);
toDoListApp.controller('ToDoListController', function ($scope) {
/* Model */
$scope.items = [
{desc: 'Go shopping', done: false},
{desc: 'Clean my room', done: true},
{desc: 'Sleep', done: false}
];
$scope.newItemDescription = '';
/* Events */
$scope.addItem = function () {
$scope.items.push({
desc: $scope.newItemDescription,
done: false
});
};
});
<!doctype html>
<html lang="en" ng-app="ToDoListApp">
<head>
<meta charset="utf-8">
<title>To-do List</title>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="ToDoListController">
<h1>To-do List</h1>
<ul>
<li ng-repeat="item in items">
{{item.desc}}
</li>
</ul>
<p>
<input type="text" ng-model="newItemDescription" /></input><button ng-click="addItem()">Add</button>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment