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>

Answers


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;

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


Need Your Help

UIButton subclass continuously highlighted after an popping up and UIAlertView

iphone cocoa-touch uibutton uialertview

I am subclassing a UIButton and detecting finger movements, if the user swipes his finger in a certain way I will pop up an UIAlerView.

fancyBox autosize IFrame

c# javascript fancybox

So I have an apsx page with 2 buttons at the top and an IFrame below.