AngularJS , pushing empty element

Question

Im quite new with angular. What am i freaky about is that following code is showing empty buttons (edit/delete) even if it looks empty (on start) :

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="todoCtrl">

<h2>todo</h2>

<form ng-submit="todoAdd(item)">
    <input type="text" ng-model="todoInput" size="50" placeholder="Add New">
    <input type="submit" value="Add New">
</form>

<br>

<div ng-repeat="x in todoList">
   <span ng-bind="x.todoText"></span><button id="#edit" ng-click="edit(item)">edit</button><button ng-click="remove(item)">delete</button>
</div>

<script>
var app = angular.module('myApp', []); 
app.controller('todoCtrl', function($scope) {
    $scope.todoList = [{}];

    $scope.todoAdd = function(item) {
        $scope.todoList.push({todoText:$scope.todoInput);
        $scope.todoInput = "";
    };

    $scope.remove = function(item) {
        var index = $scope.todoList.indexOf(item);
        $scope.todoList.splice(index, 1);
    };
    $scope.edit = function(item) {
        //function
    };
});
</script>

</body>
</html>

And also can somebody to help me after clicking on edit to push todoText to input and change caption of addnew to save? and afterthen change it to addNew again?

Thank you very much

Do you ask for Angular2 or AngularJS? It looks like AngularJS code, but you used angularjs tag, and write Angular2 in your question... — Mistalis
– Mistalis, Commented Oct 20, 2016 at 7:54

Manish Singh · Accepted Answer · 2016-10-20 09:07:28Z

1

Replace line

$scope.todoList = [{}];

to

$scope.todoList = [];

Then, it wouldn't show you empty line.

//Full code.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="todoCtrl">

<h2>todo</h2>

<form>
    <input type="text" ng-model="todoInput" size="50" placeholder="Add New">
    <input type="button" value="{{actionName}}" ng-click="todoAdd()" />
</form>

<br>

<div ng-repeat="x in todoList">
   <span>{{x.todoText}}</span><button id="#edit" ng-click="edit(x)">edit</button><button ng-click="remove(item)">delete</button>
</div>

<script>
var app = angular.module('myApp', []); 
app.controller('todoCtrl', function($scope) {
    $scope.todoList = [];
    $scope.actionName = 'Add';

    $scope.todoAdd = function() {
     if($scope.actionName === 'Add'){
        $scope.todoList.push({todoText:$scope.todoInput});
        $scope.todoInput = "";
     } else {
        var index = $scope.todoList.indexOf($scope.temp);
        console.log('index: ' + index);
        $scope.todoList.splice(index, 1, {todoText:$scope.todoInput});
        $scope.actionName = 'Add';
     }
    };

    $scope.remove = function(item) {
        var index = $scope.todoList.indexOf(item);
        $scope.todoList.splice(index, 1);
    };
    $scope.edit = function(item) {
        $scope.todoInput=item.todoText;
        $scope.temp = item;
        $scope.actionName = 'Save';
    };
});
</script>

</body>
</html>

edited Oct 20, 2016 at 9:07

answered Oct 20, 2016 at 8:00

Manish Singh

5383 silver badges13 bronze badges

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

5 Comments

Martin Fric Over a year ago

wow. great. and what about that edit? Can u give me a hint please?

Martin Fric Over a year ago

Just to change content of "TODO TASK"

Manish Singh Over a year ago

Ok. I will try.

Manish Singh Over a year ago

Will you please create a jsfiddle of it ?

Martin Fric Over a year ago

this is what i wanted? :) and how to make edited input empty after then? :)

Collectives™ on Stack Overflow

AngularJS , pushing empty element

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related