Prevent an empty input to the list array with AngularJS

[Billy_Halim]

Hello,

I am having a problem on my Todo List Project using AngularJS. I want that an empty input (there are nothing in the input form) doesn’t appear on the todo list

This is my controller.js snippet

   $scope.empty = function() {
            var emptyTodos = $scope.todos;
            $scope.todos = [];
            if ($scope.todoText === null){
                $scope.todos.push($scope.todoText);
            }
        };

My index.html snippet

> <ul class="unstyled">
>    <li ng-repeat="todo in todos | orderBy : $index:true">
>        <input type="checkbox" ng-model="todo.done">
>        <span class="done-{{todo.done}}">{{todo.text}}</span>
>     </li>
> </ul>

When I use the code above, my todo list is suddenly not working. Whether I inputted something or not and click add, nothing appeared. Are there any solution ?

[Billy_Halim]

Sorry, I have edited the post

[m3g4p0p]

What your function does is emptying your entire $scope.todos and then push $scope.todoText, but only if it is null. This way you’ll end up with either $scope.todos === [] or $scope.todos === [null]. This function isn’t getting called in your snippets anyway, though. Also note that it’s todoText in your controller, but todo.text in the view.

If you simply don’t want to show empty texts, I’d suggest to use something like ng-hide="todo.text === ''" instead.