【问题标题】:ng-class apply outside of ng-repeat?ng-class 适用于 ng-repeat 之外?
【发布时间】:2015-03-17 19:00:40
【问题描述】:
<ul class="listing listing-sm small" ng-class="{'divider': (model.selections | filter:filter).length > 0}">
  <li ng-repeat="selection in model.selections | filter:filter" ng-class="{highlight: selection.on}">

有没有更好的方法在 ul 上添加类而不通过过滤器 2x(在 ul 和 ng-repeat 上)运行数据?

【问题讨论】:

  • 你能不使用一个类,而是使用:not(:empty)作为CSS规则吗? (看起来你只是在检查非空列表)

标签: javascript angularjs angularjs-ng-repeat angularjs-filter


【解决方案1】:

您可以在回调函数中创建过滤器并检查它们的长度并根据结果更改标志。

<ul class="listing listing-sm small" ng-class="{'divider':hasResults}">
    <li ng-repeat="selection in manualFilter(model.selections)" ng-class="{highlight: selection.on}">

在js中:

$scope.manualFilter = function(selections) {
     var result = $filter('filter')(selections);
     if (result.length > 0 ) {
              $scope.hasResults = true;
     } else {
              $scope.hasResults = false;
     }
}

【讨论】:

  • 我收到这条消息:Error: [$injector:unpr] Unknown provider: manualFilterFilterProvider &lt;- manualFilterFilter
  • 通过将 ng-repeat 更改为:selection in manualFilter(model.selections) 并将return result 添加到 $scope.manualFilter 函数的末尾来解决它。
【解决方案2】:

您可以使用 $index 之类的东西和一个名为 $scope.selected 的变量并使用 ng-class = "'highlight': $index === selected"

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-12-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多