Skip to content

Instantly share code, notes, and snippets.

@luisangelma
Created August 4, 2015 00:42
Show Gist options
  • Select an option

  • Save luisangelma/a9c17c82e9e4fee1471e to your computer and use it in GitHub Desktop.

Select an option

Save luisangelma/a9c17c82e9e4fee1471e to your computer and use it in GitHub Desktop.
Angular todo list
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app="myApp" ng-controller="mainController">
<p>Add an item</p>
<input type="text" placeholder="Item name..." ng-model="todoItem">
<input type="button" value="Add item" ng-click="addTodo()">
<p>Shopping List</p>
<ul>
<li ng-repeat="todo in todoItems track by $index">{{ todo }}
<button ng-click="removeItem($index)">X</button></li>
</ul>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('mainController', ['$scope', function($scope){
$scope.todoItem = '';
$scope.todoItems = [];
$scope.addTodo = function() {
if ($scope.todoItem.length <= 0) {
console.log('Your todo cannot be an empty string');
} else if ($scope.checkForDuplicates()) {
console.log($scope.todoItem + ' is a duplicate');
} else {
$scope.todoItems.push($scope.todoItem.toLowerCase());
$scope.todoItem = '';
}
};
$scope.checkForDuplicates = function() {
for (var i = 0; i < $scope.todoItems.length; i++) {
if($scope.todoItem.toLowerCase() === $scope.todoItems[i]) {
console.log('You already have ' + $scope.todoItem + ' in your shopping list');
return true;
}
}
return false;
}
$scope.removeItem = function(item) {
$scope.todoItems.splice(item, 1);
};
}]);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment