AngularJS에서 ng-repeat를 사용하는 동적 클래스

이것은 중복되지 않습니다.AngularJS에서 ng-repeat를 사용하는 동적 클래스

다른 게시물에서는 삼자 연산 만하고 있습니다. 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": "", 
    } 
]

I 입력 "loma1pwipdb2002"이면 클래스는 col-md-3이되고 모든 요소에 대해 ng-repeat가 적용됩니다. 클래스를 serverIdLength> 12에만 적용하고 12보다 작 으면 col-md-2을 적용해야합니다.

상담하십시오.

출처

2017-10-04 a2441918

중복 (https://stackoverflow.com/questions/15397252/angularjs-toggle-을 class-using-ng-class). 게시하기 전에 더 많은 조사를하십시오. – Alburkerk

[ng-class를 사용하는 AngularJS 토글 클래스]의 가능한 복제본 (https://stackoverflow.com/questions/15397252/angularjs-toggle-class-using-ng-class) – Julian

예,이 복제본은 보이지 않습니다. 다른 게시물에서는, 그들은 단지 삼중 연산을하고 있습니다. ng-repeat 내에서 클래스를 변경하고 싶습니다. – a2441918

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 모든 목록을 한 번 계산되고 있다는 점이다 할 것입니다. 당신은 각 항목에 특정한 속성을 기반으로 동적 인 클래스를 가지기를 원합니다.

문제와 참가 조건을 이해하지 못했다면 계속 논의 해 보겠습니다.

출처

2017-10-04 21:12:23 dhilt

안녕하세요. 일부 이미지로 내 질문을 수정했습니다. 내가 직면하고있는 문제에 대해 더 잘 이해할 수있을 것 같습니다. – a2441918

@ a2441918 그래서 해결책은 무엇입니까? 내 대답인가? 아니요, 귀하의 질문을 업데이트하는 것이 좋습니다. 또한 이슈의 제목을 변경하는 것이 좋습니다! – dhilt

것을 시도하지 :

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

출처

2017-10-04 21:32:06

문제가 여기에 거짓말을하는 것 같다

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

을 상관없이 $scope.serverIdLength은 항상 마지막 SERVERID의 길이로 설정됩니다 것을. 이는 전역 변수이고 하나의 인스턴스 만 있기 때문입니다. 이것이 모든 수업이 일치하는 이유입니다. 그들은 모두 동일한 변수를 참조합니다.

대신 @dhilt 제안 수로 제어부 코드 등

및 DOM에서 길이 acccess이 [질문]의

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

출처

2017-10-04 21:37:07

AngularJS에서 ng-repeat를 사용하는 동적 클래스

답변

관련 문제