具有自定义条件的 NG-STYLE 未触发答案

【问题标题】：NG-STYLE with custom condition not firing具有自定义条件的 NG-STYLE 未触发
【发布时间】：2017-04-22 01:08:02
【问题描述】：

我在远程数据源中有以下项目（非常简化）

[
{
    "id": "3",
    "card_name": "Free Beer!",
    "count": "1"
}

]

我有一个带有 NG-REPEAT 的 DIV（再次大大简化）

<div ng-repeat="card in cardDetails">
 <h1>{{card.card_name}}</h1>
 <button ng-style="set_hide(card)">Claim Me</button>
</div>

以及我的控制器中的以下内容

    $scope.set_hide = function (card) {
    if (card.count > 0) {
        return { display:none }
    } else {
        return { display:block }
    }
}

所以基本上如果这张卡的计数不为零（1+），按钮应该显示：无并消失

其余信息（即卡名）按预期呈现，如果我还添加{{card.count}}，则按预期显示为 1

但什么也没有发生。没有错误，什么都没有

为什么我的 ng-style 没有触发

提前感谢您的任何指导

【问题讨论】：

标签： angularjs function conditional-statements ng-style

【解决方案1】：

如果您只需要隐藏按钮。一个更简单的方法是不使用函数 set_hide()。

你可以在按钮元素中插入 ng-hide 属性。

<button ng-hide="card.count > 0">Claim Me</button>

【讨论】：

请编辑您的答案以包含一些解释。仅代码的答案对教育未来的 SO 读者几乎没有作用。您的答案因质量低劣而在审核队列中。
ng-hide 仍将元素保留在 DOM 中，但不会显示它。可能更好的解决方案是 ng-if。
akshar: ng-hide, ng-if -> 差异可以忽略不计。你怎么知道'可能是一个更好的解决方案'？？？为什么更好？用 DOM 做更多不必要的操作？？非常奇怪的建议。

【解决方案2】：

你应该这样做：

$scope.set_hide = function (card) {
  if (card.count > 0) {
    return { display:'none' }
  } else {
    return { display:'block' }
  }
}

您缺少围绕“无”和“阻止”的引号。

【讨论】：

感谢您的回答，但 ng-hide 解决了我的问题。感谢您抽出宝贵时间回答