var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function($scope){
$scope.names = ['do the laundry','buy bananas','do the dishes','mow the lawn'];
$scope.addName = function() {
// also need to get new date and time stamp it on item
$scope.date = new Date();
$scope.names.unshift($scope.enteredName);
$scope.enteredName = "";
};
$scope.removeName = function(name){
var i = $scope.names.indexOf(name);
$scope.names.splice(i, 1);
// array.splice(start, deleteCount[, item1[, item2[, ...]]])
// How do I push onto the ul
$scope.removed.push(name);
};
});
</script>
This is from the Introduction to Angular JS in 50 Examples Part 1 video on Youtube at Introduction to Angular JS in 50 Examples Part 1
I'm trying to make a simple To-Do list forked from this video. I'd like to append or push values that are either removed or checked completed onto respective unordered lists.
Here's the HTML:
<body ng-controller="NameCtrl">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 jumbotron">
<form ng-submit="addName()">
<input type="text" ng-model="enteredName" class="form-control">
<input type="submit" class="form-control btn-primary" value="Add">
</form>
<ul style="padding: 0;">
<li class="list-group-item btn text-primary" data-toggle="tooltip" ng-repeat="name in names" title="Created {{ date | date: 'short' }}">
{{ name }}
<button class="btn btn-xs btn-success pull-left" ng-click="removeName()"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>
<button class="btn btn-xs btn-danger pull-right" ng-click="removeName()"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 jumbotron btn-success">
<h3>Completed</h3>
<ul class="removed" ng-model="removed">
<li class="list-group-item"></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 jumbotron btn-danger">
<h3>Deleted</h3>
<ul class="removed" ng-model="removed">
<li class="list-group-item"></li>
</ul>
</div>
</div>
</div>
</body>
I'm just working on the removeName() function. I'll add a completedName() function later.
Coming from jQuery where you can write HTML elements on-the-spot, AngularJS is a bit of a new realm for me as a noob. Doing a search for how to do this, I get pages on AngularJS directives, and that is a bit overboard for this purpose.
** The ng-model="removed" in the was a test. It seems that you can link data this way, and this creates a "$scope.removed", which I then figured I could use the data. Could be misleading until we find a working answer.
Suggestions appreciated. Thank you!
FIXED!
Thanks for your speedy responses. According to the JSFiddle mentioned, I made the following changes:
<script>
<!-- must make variable app name THE SAME AS the ng-app name! -->
var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function($scope){
$scope.names = ['do the laundry','buy bananas','do the dishes','mow the lawn'];
$scope.removedNames = []; // added this
$scope.completedNames = []; // added this
$scope.date = new Date();
$scope.addName = function() {
// also need to get new date and time stamp it on item
$scope.names.unshift($scope.enteredName);
$scope.enteredName = "";
};
$scope.removeName = function(name){
var i = $scope.names.indexOf(name);
$scope.names.splice(i, 1);
$scope.removedNames.unshift(name + " DELETED AT " + $scope.date);
};
$scope.completeName = function(name){
var j = $scope.names.indexOf(name);
$scope.names.splice(j, 1);
$scope.completedNames.unshift(name + " COMPLETED AT " + new Date());
};
});
</script>
And finally:
<body ng-controller="NameCtrl">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 jumbotron">
<form ng-submit="addName()">
<input type="text" ng-model="enteredName" class="form-control" placeholder="Enter task">
<input type="submit" class="form-control btn-primary" value="Add">
</form>
<ul style="padding: 0;">
<li class="list-group-item btn text-primary" data-toggle="tooltip" ng-repeat="name in names" title="Created {{ date | date: 'short' }}">
{{ name }}
<button class="btn btn-xs btn-success pull-left" ng-click="completeName(name)"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button> <!-- added completeName(name) function -->
<button class="btn btn-xs btn-danger pull-right" ng-click="removeName(name)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> <!-- altered removeName(name) function -- even though it still works without the name param... -->
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 jumbotron btn-success">
<h3>Completed</h3>
<ul class="completed">
<li class="list-group-item text-success text-center" ng-repeat="name in completedNames"> {{ name }} </li> <!-- altered this -->
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12 jumbotron btn-danger">
<h3>Deleted</h3>
<ul class="removed">
<li class="list-group-item text-danger text-center" ng-repeat="name in removedNames"> {{ name }} </li> <!-- altered this -->
</ul>
</div>
</div>
</div>
</body>
ng-click="removeName(name)"– devqon May 19 '15 at 10:41