How to hide the text and checkbox when checked to remove in AngularJS?

Question

How to hide the checkbox with the text getting removed in the below picture :

Screen 1 :

When the page is loaded the screen would look like below :

enter image description here

Screen 2 :

When the checkbox is checked ,the text disappears but checkbox remains there.

enter image description here

Javascript Code:

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

  $scope.addTodo = function() {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  };

  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
}

FIDDLE LINK HERE

You might want to consider hiding the elements using ng-hide, instead of adding a class and hiding the element with a CSS style. — Tomislav Dyulgerov
– Tomislav Dyulgerov, Commented May 20, 2015 at 8:20

Tharif · Accepted Answer · 2015-05-20 08:40:18Z

1

Check out this fiddle

 <li ng-repeat="todo in todos" class="done-{{todo.done}}">
    <input type="checkbox" ng-model="todo.done">
    <span >{{todo.text}}</span>
  </li>

You had to move the class to the whole list element to hide it, not only the text

edited May 20, 2015 at 8:40

Tharif

14k10 gold badges57 silver badges78 bronze badges

answered May 20, 2015 at 8:05

Cristi Marian

4538 silver badges18 bronze badges

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

Comments

user3227295 · Accepted Answer · 2015-05-20 08:05:42Z

0

put the class="done-{{todo.done}}"

also on the checkbox

<input class="done-{{todo.done}}" type="checkbox" ng-model="todo.done">

answered May 20, 2015 at 8:05

user3227295

2,1561 gold badge13 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to hide the text and checkbox when checked to remove in AngularJS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related