javascript - 使用 $scope AngularJS 仅显示数组中的最新值

Question

因此，当选择日历上的日期时，我尝试显示某些数据(日记条目)(参见图像)

Image of calendar.

Image of result when a date with journal entry is picked.

因此，当选择日期并且数组中有日记条目时，它将显示在底部的卡片上。

我的问题:

所以我的问题是，当我有多个条目并且我选择除最后输入的任何条目时，它们不会显示。但是当我选择最后一个条目时，它显示得非常完美。

我的代码:

$scope.journalData = {};
for (var i = 0; i < $scope.entryArray.length; i++) {
  if ($scope.entryArray[i].date == $scope.startDate.text) {
    $scope.journalData = $scope.entryArray[i];
    console.log($scope.journalData);
  } else {
    $scope.journalData = {};
  }
}

<div class="card">
   <div class="item item-divider">
    {{journalData.date}}
  </div>
  <div class="item item-text-wrap">
    {{journalData.text}}
  </div>
</div>

$scope.entryArray 是本地存储中的一个数组，其中包含存储的所有日记条目，如下所示:

var 条目 = { 日期:$scope.startDate.text， 文本:$scope.formData.journalEntry }

如您所见，只要日期与所选日期匹配，我都会进行控制台记录。假设我今天(4 月 20 日)、明天和后天有 3 个条目。这是输出:

{日期:“2017 年 4 月 20 日星期四”，文本:“asdfasdf”} {日期:“2017 年 4 月 21 日星期五”，文本:“asdfasdfasdf”} {日期:“2017 年 4 月 22 日星期六”，文本:“asdfasdfasdf 3”}

第三次日期发生变化。该卡在屏幕底部显示数据(就像它应该的那样)。

谁能帮我弄清楚为什么当我控制台日志时它只显示第三个条目并且它存储在正确的变量中？

Answer 1

当您选择第一个日期时，journalData 在 for 循环的第一次迭代中具有正确的值。但在下一次迭代中，由于 if block 中的日期不匹配，因此它执行 else block ，因此 journalData 变量再次为空.

如果删除 else block ，它应该可以工作。由于您在 for 循环开始之前已将 journalData 设置为空白，因此不需要 else block 。

此外，您还可以在找到匹配项后添加中断来进一步优化代码。它会是这样的:

for (var i = 0; i < $scope.entryArray.length; i++) {
  if ($scope.entryArray[i].date == $scope.startDate.text) {
    $scope.journalData = $scope.entryArray[i];
    console.log($scope.journalData);
    break;
  } else {
    $scope.journalData = {};
  }
}

在此，一旦日期匹配，它将中断 for 循环。