CODEWITHSUNDEEP
javascriptangularjs
geeks
geeks

Reputation: 2055

How to hide and show HTML element dynamically in angularjs?

I have table for some task, In that table every row has one task. In every row there is status which is controller by one button. Initial status of every task will be show as In Progress and text of Button as Mark Done, But when click on the button then It will change the status of the task as Done and change the text of button as Mark In Progress. If In future If we want to change the status of "Done" task then we can change the status through Button "Mark In Progress". Please see DEMO onDEMO on Plunker

Angularjs

<script>
    var app = angular.module('myApp', []);
    app.controller('tasksCtrl', function($scope, $http) {
      $http.get("data.json")
        //$http.get("/todo/api/v1.0/tasks")
        .success(function(response) {
          $scope.tasks = response.tasks;
        });
        $scope.markInProgress=function(task){
             alert("markInProgress");
             title=task.title;
             description=task.description;
             uri=task.uri;
             var data={title: title, description: description, done: false, uri:uri};

             // For server But here there is no server so I assigne data outside $http.put
             $scope.tasks[$scope.index] = data;

             // For server
             $http.put(uri, data)
             .success(function(){
                 $scope.tasks[$scope.index] = data;
             });
        };
        $scope.markDone=function(task){
            alert("markDone");
            title=task.title;
             description=task.description;
             uri=task.uri;
             var data={title: title, description: description, done: true, uri: uri};

             // For server But here there is no server so I assigne data outside $http.put
             $scope.tasks[$scope.index] = data;

             // For server
             $http.put(uri, data)
             .success(function(){
                 $scope.tasks[$scope.index] = data;
             });
        };
    });
  </script>

Upvotes: 2

Views: 6743

Answers (2)

stevenw00
stevenw00

Reputation: 1156

There are a couple of errors.

In your HTML you have to reference the object's "done" property.

<div ng-repeat="task in tasks">
  <span ng-show="task.done" class="label label-success">Done</span>
  <span ng-show="!task.done" class="label label-important">In Progress</span>
 </div>

In your Angualr functions, $scope.index is the incorrect way to find the index. Instead find the index and use the var index in the rest of your function.

var index = $scope.tasks.indexOf(task);
$scope.tasks[index].done = true;

Upvotes: 2

messerbill
messerbill

Reputation: 5639

there are several ways, i would use ng-show for this.

https://docs.angularjs.org/api/ng/directive/ngShow

you have to ensure, that the value for your "show" variable is set correctly via your angular controllers.

HTML:

<div ng-show="myValue"></div>

JS:

//your controller code
(.....).success(function(){
  $scope.myValue = true;
})

if you want to hide you can do it of course by the same way:

//your controller code
(.....).success(function(){
  $scope.myValue = false;
})

i hope this helps you

Upvotes: 0

Related Questions