CODEWITHSUNDEEP
arraysangularjsappendpush
Craig O. Curtis
Craig O. Curtis

Reputation: 33

Push / append Angular array data into an HTML element?

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>

Upvotes: 2

Views: 4575

Answers (2)

Neo
Neo

Reputation: 4760

There are couple of issues with your code.

  1. You have not initilized removed array
  2. 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>

Upvotes: 0

devqon
devqon

Reputation: 13997

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

Upvotes: 1

Related Questions