CODEWITHSUNDEEP
javascripthtmlangularjs
user7138187
user7138187

Reputation:

AngularJS ToDo List Application - Is adding to list without text from input

Quite a simple problem, but one I can't solve.

I'm trying to develop an Angular ToDo application, which is currently adding the task after clicking on the add button, but is not pushing the actual text from the input to the list. It adds an item to the list, but not the text.

Codepen: http://codepen.io/anon/pen/Mpepzy.

HTML:

<!DOCTYPE html> 


<head> 

    <meta charset="utf-8"> 

    <meta name="viewport" content="width=device-width, initial-scale=1">  

    <meta name="description" content="Nick Cook">

    <meta name="author" content="Nick Cook">

    <title>NC - Angular Project - ToDo App</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">

    <link href="https://fonts.googleapis.com/css?family=Roboto:400,900|Open Sans:400,700" rel="stylesheet"> 

    <link rel="stylesheet" href="css/style.css">

</head>     

<body ng-app="todoApp"> 

    <main>

        <md-content layout="row">

            <md-card class="md-padding" ng-controller="todoController">

                <div><md-card-title>

                    <md-card-title-text>

                        <span class="md-headline">ToDo List</span>

                        <span class="md-subhead">AngularJS Material Application</span>

                    </md-card-title-text>

                </md-card-title></div>
                </md-card-title></div>

                <form class="md-padding">

                    <div layout-gt-sm="row">

                        <md-input-container class="md-block" flex-gt-sm>

                            <label>Add New Task</label>

                            <input type="text" ng-model="taskName" size="50">

                        </md-input-container>

                    </div>

                    <md-button ng-click="addTask()" class="md-raised md-primary">ADD</span></md-button>

                </form>

                <md-list class="md-padding">

                    <md-subheader class="md-no-sticky">Current Tasks</md-subheader>

                    <md-list-item ng-repeat="task in taskList">

                        <p>{{task.name}}</p>

                    <md-checkbox class="md-secondary" ng-model="task.completed"></md-checkbox>

                 </md-list-item>

                </md-list>

                <md-card-actions layout="row" class="md-padding">

                    <md-menu flex>

                      <md-button ng-click="$mdOpenMenu($event)" class="md-raised md-primary" aria-label="Menu"><span class="fa fa-gear fa-lg"></span></md-button>

                        <md-menu-content width="3">

                            <md-menu-item>

                                <md-button ng-click="ctrl.menuItemClick($index)">

                                    <div layout="row">

                                        <p flex>Page One</p>

                                    </div>

                                </md-button>

                            </md-menu-item>

                            <md-menu-item>

                                <md-button ng-click="ctrl.menuItemClick($index)">

                                    <div layout="row">

                                        <p flex>Page Two</p>

                                    </div>

                                </md-button>

                            </md-menu-item>

                            <md-menu-item>

                                <md-button ng-click="ctrl.menuItemClick($index)">

                                    <div layout="row">

                                        <p flex>Page Three</p>

                                    </div>

                                </md-button>

                            </md-menu-item>

                        </md-menu-content>

                    </md-menu>

                </md-card-actions>

            </md-card>

        </md-content>

    </main>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

    <script src="js/app.js"></script>

</body>

JS:

var app = angular.module('todoApp', ['ngMaterial']);

function menuController ($scope, $mdDialog) {
    var originatorEv;
    this.openMenu = function($mdOpenMenu, ev) {
        originatorEv = ev;
        $mdOpenMenu(ev);
    };
};  

app.controller('todoController', function($scope) {

    $scope.taskList = [];

    $scope.addTask = function() {
        $scope.taskList.push($scope.taskName);  
    };

});

Upvotes: 0

Views: 538

Answers (3)

Senthil Sivaramakrishnan
Senthil Sivaramakrishnan

Reputation: 361

Updated in the codepen: http://codepen.io/ssthil/pen/LWbaXo

$scope.addTask = function() {
        $scope.taskList.push({name: $scope.taskName});
        $scope.taskName = "";
    };

when you push into array: 

{name: $scope.taskName}

for clearing the input 

$scope.taskName = "";

Upvotes: 0

Gaurav Kumar Singh
Gaurav Kumar Singh

Reputation: 1570

you need to update your addTask function like

$scope.addTask = function() {
    var task = {name: $scope.taskName};
    $scope.taskList.push(task);  
    $scope.taskName = "";
};

Upvotes: 0

tottomotto
tottomotto

Reputation: 2352

In the ng-repeat, you're trying to render the name property of task.

And this doesn't exist. taskList is an array of strings.

<md-list-item ng-repeat="task in taskList">
  <p>{{task.name}}</p>  <---- there is no 'name' property of task
  <!-- md-checkbox -->
</md-list-item>

Solution: Push an object to the taskList array. For example

$scope.taskList.push({name: $scope.taskName});

Upvotes: 2

Related Questions