How to hide and show HTML element dynamically in angularjs?

Question

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>

you can use ng-if="data.done == false" this would show the element as long as $scope.data.done is false ---> if u then mark it as done you can use ng-click="data.done = true" now you marked it as done and it is hiding but your data object needs to be $scope.data instead of var — stackg91
– stackg91, Commented Jul 9, 2015 at 12:46

stevenw00 · Accepted Answer · 2015-07-10 02:21:26Z

2

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;

edited Jul 10, 2015 at 2:21

answered Jul 9, 2015 at 12:56

stevenw00

1,1561 gold badge13 silver badges22 bronze badges

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

5 Comments

kiswa Over a year ago

You could also have it in the function call by changing the button call to whateverMethod(task, $index) and changing the methods to have an additional parameter for the index.

stevenw00 Over a year ago

But I think this will call a wrong index, for example if the list has a sort function - as the $index is the position displayed, rather than the position in the array.

kiswa Over a year ago

True, but there was no sorting or filtering on the display, so it would be fine in this use case. Your version is future-proof though, so better if there might be changes to the display.

geeks Over a year ago

@stevenw00 thanks for reply I modify accoding to you plnkr.co/edit/o3ZKESi4d4m2FPUMQxaT?p=preview, I test it my local machine it working but I have to reload browser. Please tell me how to make changes without reloading browser...

stevenw00 Over a year ago

Sorry typo in answer, fixed it. var index should be $scope.tasks not $scope.task.

messerbill · Accepted Answer · 2015-07-09 12:46:51Z

0

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

answered Jul 9, 2015 at 12:46

messerbill

5,6391 gold badge31 silver badges39 bronze badges

2 Comments

stevenw00 Over a year ago

The OP has a couple of errors in the JS that won't assign the myValue correctly. So although this example is the correct way of using ngShow - this is not enough in this case.

messerbill Over a year ago

he looks like he knew what he was doing so i thought this answer would be enough for him to understand how dynamically changing divs in angular...

Collectives™ on Stack Overflow

How to hide and show HTML element dynamically in angularjs?

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related