语法错误：标记 '&&' 不是主要表达式

Question

我的 ionic 应用程序视图中有以下代码：

<ion-item 
    ng-repeat="milestone in project.milestones" 
    href="#/tab/activity/{{milestone.slug}}/milestone" 
    ng-style="{{now | amDifference : null : 'days'}} > {{milestone.due_date | amDifference : null : 'days'}} && {'color':'red'} || {'color': 'blue'}">

但是它给了我这个错误：

错误：[$parse:syntax] 语法错误：标记 '&&' 不是表达式 [0 > && {'color':'red'} 的第 6 列的主表达式 || {'color': 'blue'}] 开始于 [&& {'color':'red'} || {'color': '蓝色'}]。

悬停上述错误似乎不会影响执行（现在我认为）我不知道它来自哪里。 在上面的代码中，我尝试使用 moment.js 将当前时间与设定时间进行比较

Answer 1

您的 ng-style 属性中的表达式没有意义：

{{now | amDifference : null : 'days'}} > {{milestone.due_date | amDifference : null : 'days'}} && {'color':'red'} || {'color': 'blue'}

它应该是一个单一的对象字面量，或者一个计算结果为 1 的角度表达式。

在“>”的左侧，您有一些包含在“{{”中的内容。这在角度表达式中无效。仅使用 '{{' 替换不采用角度表达式的地方'。我认为您这样做是因为您想对值使用过滤器，但在这种情况下这样做并不容易，因为您必须将过滤器公开到范围内。

尽我所能让你尝试做这样的事情：

$scope.itemStyle = function itemStyle(now, milestone) {
    if (amDifferenceFilter(now, null, 'days') > amDifferenceFilter(milestone.due_date, null, 'days')) {
        return { color: 'red' }
    } else {
        return { color: 'blue' }
    }
}

如果您还没有这样做，您还需要将amDifferenceFilter 注入您的控制器，或者直接从 javascript 代码中使用 moment.js。

那么你的html应该是：

<ion-item ng-repeat="milestone in project.milestones"
  href="#/tab/activity/{{milestone.slug}}/milestone"
  ng-style="itemStyle(now,milestone)">

在ng-style 中编写复杂的表达式可能会令人困惑，通常最好将它们拉出到控制器中。

Answer 2

你在 ng-style 之后缺少一个 "。