Push / append Angular array data into an HTML element?

Question

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>

Add the name as parameter: ng-click="removeName(name)"

devqon
– devqon

2015-05-19 10:41:52 +00:00
Commented May 19, 2015 at 10:41 — devqon
– devqon, Commented May 19, 2015 at 10:41

devqon · Accepted Answer · 2015-05-19 10:59:43Z

1

Your remove function expects the name as parameter, but you don't use it in your html. Include the parameter in your ng-click:

<li ng-repeat="name in names">
    {{ name }}
    <button ng-click="removeName(name)">Remove</button>
</li>

Fiddle

Another example, with I believe what is you are trying to achieve, or at least pushing you to the right direction

edited May 19, 2015 at 10:59

answered May 19, 2015 at 10:45

devqon

14k2 gold badges32 silver badges46 bronze badges

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

3 Comments

Craig O. Curtis Over a year ago

Tried your suggestion, but didn't work. I'm looking to just append that last-deleted (or completed) item to the unordered list. Actually the "name" is passed into the function itself in the <script> tags.

devqon Over a year ago

See the other example

Craig O. Curtis Over a year ago

Great - I'll add the fixes from the JSFiddle below my original question.

Neo · Accepted Answer · 2015-05-19 11:03:47Z

0

There are couple of issues with your code.

You have not initilized removed array
You are not calling removeName(name)

See jsfiddle example here.

Basically two things

    $scope.removed = []

<button class="btn btn-xs btn-success pull-left" ng-click="removeName(name)">Remove Name</button>

answered May 19, 2015 at 11:03

Neo

4,7906 gold badges39 silver badges55 bronze badges

Collectives™ on Stack Overflow

Push / append Angular array data into an HTML element?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related