Динамические классы, использующие ng-repeat в AngularJS

Это не дубликат.

В другом посте они просто выполняют троичную операцию. Я хочу изменить классы в 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": "",
    }
]

Когда я ввожу «loma1pwipdb2002», класс становится col-md-3, и, поскольку я использую ng-repeat, применяется ко всем элементам. Я хочу, чтобы класс применялся только к serverIdLength> 12, и если он меньше 12, следует применить col-md-2.

Пожалуйста посоветуй.


javascript angularjs angularjs-ng-repeat ng-class
person a2441918    schedule 04.10.2017    source источник
comment
Дубликат этого вопроса. Пожалуйста, сделайте больше исследований перед публикацией.   -  person Alburkerk    schedule 05.10.2017
comment
Возможный дубликат класса переключения AngularJS с использованием ng-класса   -  person Julian    schedule 05.10.2017
comment
Да, это не похоже на дубликат. В другом посте они просто выполняют троичную операцию. Я хочу изменить классы в ng-repeat.   -  person a2441918    schedule 05.10.2017

Ответы (3)


arrow_upward
2
arrow_downward

Правильно ли вы хотите переключать свой класс для каждого элемента списка selection.serverIds отдельно на основе длины строки serverId? Нужно знать ваш selection.serverIds, это ваш "Объект области"? Если да, то я бы сделал просто

<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 вычисляется один раз для всего списка. Хотя вы хотите иметь динамический класс, основанный на каждом конкретном свойстве элемента.

Продолжим дискуссию, если я не понял вопроса и условий входа.

person dhilt    schedule 04.10.2017
comment
Привет, я отредактировал свой вопрос с некоторыми изображениями. Я думаю, вы могли бы лучше понять проблему, с которой я столкнулся. - person a2441918; 05.10.2017
comment
@ a2441918 Так какое решение? это мой ответ? если нет, я рекомендую обновить ваш вопрос. Так же рекомендую изменить название вопроса! - person dhilt; 05.10.2017

arrow_upward
1
arrow_downward

проблема, кажется, лежит здесь:

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

Независимо от того, что $scope.serverIdLength всегда будет установлено на длину последнего идентификатора сервера. Это потому, что это глобальная переменная, и у нее есть только один экземпляр. Вот почему все ваши классы совпадают. Все они ссылаются на одну и ту же переменную.

Вместо этого, как @dhilt, предложил отказаться от кода контроллера и получить доступ к длине в dom:

ng-class="server.serverId.length > 12 ? 'col-md-3' : 'col-md-2'"
person Niles Tanner    schedule 04.10.2017

arrow_upward
0
arrow_downward

Попробуй это:

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