Question

所以我有一个简单的破坏性任务列表，我正在构建练习使用Angular。当用户通过输入字段添加任务时，使用ng-repeat在页面上呈现任务，任务是在指定时间之后或单击事件发送到单独的已完成任务页面。我正在尝试做的只是在任务处于可见状态时显示h3元素。我想在没有jQuery的情况下这样做。什么是最好的方法。

<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>

这可以用css完成吗？

更新了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();
  };

}]);

更新了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>

Answer 1

您可以拥有一个有效的任务列表

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

并像这样过滤列表

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

这是一个jsfiddle示例：http://jsfiddle.net/xjrfu3kz/1/

Answer 2

我会创建一个新列表$scope.current_tasks，它是您要显示的任务的子集。然后很容易：

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

如何根据Angular.js中另一个元素的存在来显示/隐藏元素

2 个答案: