Question

我有一系列任务。他们有标题和标签。

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中是否有一种简单的方法可以实现这种条件绑定？

Answer 1

您可以过滤ng-repeat：https://docs.angularjs.org/api/ng/filter/filter

<div ng-model="tasks">
  <div class="card" ng-repeat="abc in filteredData = (tasks | filter: {type==0}) track by $index">
    <p> {{ abc.title }} </p>
  </div>
</div>

此外，通过将过滤后的数据保存在单独的列表中，您可以显示下一个任务：

<div>
  <h4>Title of first card:</h4>
  <p> filteredData[0].title </p>
</div>

您的数据将自动更新为您处理＆＃34;任务。

Answer 2

要更新inboxTasks，您可以使用$ watchCollection：

$scope.inboxTasks = [];

$scope.$watchCollection('tasks', function(newTasks, oldTasks)
{
   for (i=0; i<newTasks.length(); i++) 
   {
      if(newTasks[i].type == 0) 
      {
         $scope.inboxTasks.append(tasks[i]);
      }
   }
});

Answer 3

其他答案有助于我指出正确的方向，但这就是我如何让它发挥作用：

HTML

<input ng-model="inboxEditTitle" />

JS

$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函数。这就是所谓的平等观察，它显然更加计算密集，但却是我所需要的。

This SO question and answer对类似的问题提供了有用的评论，也是一个很好的小提琴。

More on different $watch functionality in Angular

在AngularJS中有条件地绑定数据

3 个答案: