在AngularJS中使用ng-repeat的动态类

时间:2017-10-04 21:09:53

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

这不重复。

在另一篇文章中,他们只是在做三元手术。我想在ng-repeat中更改类。

我有一小段错误的代码。

HTML

<div id="server-id-list-container" class="panel-body col-md-12 scrollbar">
    <div class="server-id-list-element" ng-class="serverIdLength > 12 ? 'col-md-3' : 'col-md-2'" ng-repeat="server in selection.serverIds">
        <p class="alert alert-info">{{server.serverId}}<span ng-click="removeServerId($index)" class="glyphicon glyphicon-remove"></span></p>
    </div>
</div>

控制器

_.forEach($scope.selection.serverIds, function(a) {
    $scope.serverIdLength = a.serverId.length;
});

范围对象:

[
    {
        "serverId": "loma1pwipdb2002",
        "serverName": "",
    },
    {
        "serverId": "shdmqprtp1",
        "serverName": "",
    }
]

当我输入&#34; loma1pwipdb2002&#34;时,该类变为col-md-3,因为我使用ng-repeat适用于所有元素。我希望该类仅应用于serverIdLength&gt; 12如果小于12,则col-md-2应该被应用。

请建议。

3 个答案:

答案 0 :(得分:2)

是否要根据selection.serverIds字符串长度分别为serverId列表的每个元素切换类?需要了解您的selection.serverIds,是您的&#34;范围对象&#34;?如果是,那么我会做

<div 
  class="server-id-list-element"
  ng-repeat="server in selection.serverIds"
  ng-class="server.serverId.length > 12 ? 'col-md-3' : 'col-md-2'"> ... </div>

问题是您的所有列表都计算了$scope.serverIdLength一次。虽然您希望根据每个项目特定属性拥有动态类。

如果我不了解问题和进入条件,请继续讨论。

答案 1 :(得分:1)

问题似乎在于:

_.forEach($scope.selection.serverIds, function(a) {
    $scope.serverIdLength = a.serverId.length;
});

无论$scope.serverIdLength始终设置为最后一个serverId的长度。那是因为它是一个全局变量,只有一个实例。这就是你所有课程都匹配的原因。它们都引用相同的变量。

相反,像@dhilt建议抛弃控制器代码并在dom中占用长度:

ng-class="server.serverId.length > 12 ? 'col-md-3' : 'col-md-2'"

答案 2 :(得分:0)

试试:

ng-class="{'col-md-3':server.serverId.length > 12, 'col-md-2':server.serverId.length <= 12}"