在AngularJS中有条件地绑定数据

ryantuck 发表于 Dev

雷安塔克

我有很多任务。它们具有标题和标签。

function Task(taskTitle, taskType) {
  this.title = taskTitle;
  this.type = taskType;
}

$scope.tasks = [];

我最终声明了许多不同类型的任务，并将它们添加到数组中

在我的html中，我显示了一列卡片，按任务类型过滤：

<div ng-model="tasks">
  <div class="card" ng-repeat="abc in tasks track by $index" ng-show="abc.type==0">
    <p> {{ abc.title }} </p>
  </div>
</div>

我想将此过滤视图中显示的第一张卡绑定到其他卡div。我将处理一个收件箱，因此将这张卡片清单减少到零。每次我“处理”一张卡并将其从列表中删除时，都需要刷新数据。

<div ng-model="firstCardInFilteredArray">
  <h4>Title of first card:</h4>
  <p> This should be the title of the first card! </p>
</div>

我的直觉是这样做（在javascript中）：

// pseudo-code!
$scope.inboxTasks = [];
for (i=0; i<tasks.length(); i++) {
  if (tasks[i].type == 0) {
    inboxTasks.append(tasks[i]);
  }
}

并在页面更改时以某种方式再次运行该功能。但这似乎很荒谬，而且不在Angular的精神范围内。

在纯JavaScript或Angular中，有没有一种简单的方法可以完成此条件绑定？

雷安塔克

其他答案帮助我指出了正确的方向，但这是我如何使其工作的方式：

的HTML

<input ng-model="inboxEditTitle" />

$scope.filteredArray = [];
$scope.$watch('tasks',function(){
       $scope.filteredArray = filterFilter($scope.tasks, {type:0});
       $scope.inboxEditTitle = $scope.filteredArray[0].title;
    },true); // the 'true' keyword is the kicker

将第三个参数设置$watch为true意味着对tasks数组中任何数据的任何更改都会触发该watch函数。这就是所谓的“相等监视”，它显然需要更多的计算量，但这正是我所需要的。