AngularJS에서 ng에 대한-class 지시자의 여러 구현 방법 설명

머리말

개발 중에 자주 만나는 요구 사항이 있습니다. 특정 요소가 다른 상태에서 다른 모습을 보여야 할 때, 이 모습은 물론 CSS 속성을 변경하는 것입니다. 속성 값을 동적으로 변경하기 위해 동적으로 class 속성 값을 변경해야 합니다.

이곳에서 세 가지 방법을 소개해 드리겠습니다. 여러분의 필요에 따라 방법을 선택하시기 바랍니다. 아래를 확인해 보세요.

첫 번째: 데이터 양방향 바인딩을 통해 (불추천)

<div ng-controller="firstController">
  <div ng-class="{{className}}"></div>
</div>
<script>
  var app=angular.module("myModule",[])
   app.controller('firstController',function($scope){
     $scope.className='change';
   )
</script>

온라인에서 다양한 추천이 없지만, 말할 것도 없이 angularJS 양방향 데이터 바인딩이 이렇게 멋진 것이라면, 왜 이렇게 변경할 수 없을까요! 원인을 조사해 보니 'controller에서 classname이 제 생각에 항상 이상하다는 느낌이 들어, controller는 깨끗한 pure javascript 의 object가 되기를 바랍니다'라고 했습니다. 물론, 이렇게 사용할 수 없다고 명문으로 정의되어 있지 않으며, 오히려 저는 이렇게 매우 편리하다고 생각합니다. HTML 요소는 어떻게 변할지 원하는대로 변할 수 있게 합니다! 마찬가지로 img 요소의 src도 다른 것으로 변경할 수 없지만, 이 방식으로는 가능합니다! 물론, 이 방식은的确 이상한 느낌을 줍니다. 개인적으로는: 필요할 때만 사용하면 됩니다~

두 번째 방법: 객체 배열을 통해

<div ng-controller="firstController">
 <div ng-class="{true:'change1','false':'change2'}[className]'</div>
</div>
<script>
  var app=angular.module("myModule",[])
   app.controller('firstController',function($scope){
     $scope.className=true;
   )
</script>

구현은 매우 간단합니다. className가 true일 때 class는 change가 됩니다1반대로는 change가 됩니다2.

하지만 단점은 하나의 요소에 대해 두 가지 상태만 가질 수 있다는 점입니다. 이렇게 말하자면! 기본적으로 필요한 것을 충족시키는 데는 도움이 됩니다. 나는 일반적으로 이를 사용합니다. 간단하고 직관적입니다!

세 번째 방법: key를 통해/value

<div ng-controller="firstController">
  <div ng-class="{'change1':select','change2':choice','change3':lala'>
</div>
<script>
  var app=angular.module("myModule",[])
   app.controller('firstController',function($scope){
     $scope.select=true;
     $scope.lala=true;
   )
</script>

lala가 true일 때, class는 change가 됩니다3개인적으로 이는 추천할 만하다고 생각합니다. 두 번째 방법의 약간의 결함을 보완할 수 있습니다~

요약

프로젝트에서 이러한 지시를 유연하게 사용할 수 있다면 매우 많은 편리함을 얻을 수 있습니다. 문제를 해결할 때 더 많은 사고 방식을 가질 수 있으며, 이렇게 하면 이러한 지시를 조합하여 일부 불편한 문제를 빠르게 해결할 수 있습니다! 이 기사의 모든 내용이며, 배우고 일할 때 도움이 되기를 바랍니다. 의문이 있으면 댓글을 통해 교류할 수 있습니다.