CODEWITHSUNDEEP
javascriptcssangularjs
Anthony D
Anthony D

Reputation: 123

how to show/hide an element based on the presence of another element in Angular.js

So I have a simple destructive task list I'm building to practice using Angular. When a user adds a task through an input field it is rendered on the page using ng-repeat, the task is them sent to a seperate completed tasks page either after a specified time, or with a click event. What I'm trying to do is only show the h3 element when the tasks are in view. I want to do this without jQuery. What would be the best way to do this.

<div class="taskmngrBox">
  <form ng-submit="addTask()">
    <input id="taskBox" class="inputBox" type="text" name="firstname"  ng-model="newTaskName" placeholder="Add a new task">
  </form>
</div>
<div class="taskList">
  <ul id="newTaskBox">
  <h3 ng-show="">Active tasks</h3>
    <li class="currentTaskBoxes"  ng-hide="task.completed || task.expiresAt < currentDate" ng-repeat="task in tasks">
      {{ task.name }}
      <input type="checkbox" ng-model="task.completed" ng-change="tasks.$save(task)">
    </li>
  </ul>
</div>

Can this be done with just css?

Updated Angular:

blocitoff.controller('tasks.controller', ['$scope', '$state', '$stateParams', '$firebaseArray', 'Auth', function ($scope, $state, $stateParams, $firebaseArray, auth) {

  var authData = auth.$getAuth();

  var ref = new Firebase("https://amber-inferno-5836.firebaseIO.com/" + authData.uid);
  $scope.tasks = $firebaseArray(ref)

  $scope.$watch('tasks', function(tasks) {
   $scope.activeTasks = (tasks || []).filter(function(task) {
      return !(task.completed || task.expiresAt < new Date());
    });
  });

  $scope.currentDate = Date.now();

  $scope.addTask = function() {
    if ($scope.newTaskName == null) {
      taskBox.placeholder = "Please enter a task"
    }
    $scope.tasks.$add({
      name: $scope.newTaskName,
      expiresAt: Date.now() + 10000,
      completed: false
    });
    $scope.newTaskName = '';
    taskBox.focus();
  };

}]);

Updated HTML

<div class="taskmngrBox">
  <form ng-submit="addTask()">
    <input id="taskBox" class="inputBox" type="text" name="firstname"  ng-model="newTaskName" placeholder="Add a new task">
  </form>
</div>
<div class="taskList">
  <ul id="newTaskBox">
  <h3 ng-hide="activeTasks">Active tasks</h3>
    <li class="currentTaskBoxes"  ng-hide="task.completed || task.expiresAt < currentDate" ng-repeat="task in tasks">
      {{ task.name }}
      <input type="checkbox" ng-model="task.completed" ng-change="tasks.$save(task)">
    </li>
  </ul>
</div>

Upvotes: 0

Views: 1184

Answers (2)

Preston Van Loon
Preston Van Loon

Reputation: 1060

You could have an active tasks list

<h3 ng-show="activeTasks">Active tasks</h3>

And filter the list like this

$scope.$watch('tasks', function(tasks) { 
   $scope.activeTasks = (tasks || []).filter(function(task) {
      return !(task.completed || task.expiresAt < new Date());
  });
}, true); //deep watch

Here's a jsfiddle example: http://jsfiddle.net/xjrfu3kz/1/

Upvotes: 1

Brent Washburne
Brent Washburne

Reputation: 13158

I would create a new list $scope.current_tasks that is the subset of tasks you want to display. Then it's easy:

<h3 ng-show="current_tasks">Active tasks</h3>

Upvotes: 0

Related Questions