Angular에서의 조건부 논리JS 템플릿

Angular에서의 조건부 논리JS 템플릿

이렇게 각진 템플릿이 있는데

<div ng-repeat="message in data.messages" ng-class="message.type">

    <div class="info">
        <div class="type"></div>
        <div class="from">From Avatar</div>
        <div class="createdBy">Created By Avatar</div>
        <div class="arrowTo">
            <div class="arrow"></div>
            <div class="to">To Avatar</div>
        </div>
        <div class="date">
            <div class="day">25</div>
            <div class="month">Dec</div>
        </div>
    </div>

    <div class="main">
        <div class="content">
            <div class="heading2">{{message.title}}</div>
            <div ng-bind-html="message.content"></div>
        </div>

    </div>

    <br />
    <hr />
    <br />

</div>

JSfiddle을 셋업하여 데이터의 바인딩을 나타내고 있습니다.

데이터 내용에 따라 "from", "to" 및 "arrowTo"를 조건부로 표시하면 됩니다.

로그는...

• 데이터에 "from" 개체가 있는 경우 "from" div를 표시하고 데이터를 바인딩하지만 "createdBy" div는 표시하지 않습니다.
• "from" 객체는 없지만 "createdBy" 객체가 있는 경우 "createdBy" div를 표시하고 데이터를 바인딩합니다.
• 데이터에 "to" 객체가 있는 경우 "arrowTo" div를 표시하고 해당 데이터를 바인딩합니다.

또는 보통 영어로 발신인 주소가 있는 경우는 그것을 나타내고, 그렇지 않은 경우는 레코드를 작성한 사람을 나타냅니다.주소가 있는 경우는 그 주소도 표시합니다.

ng-switch를 사용하는 것을 검토했습니다만, 데이터가 없으면 빈 div를 남기는 추가 마크업을 해야 할 것 같습니다.게다가 스위치 지시사항을 내포해야 하는데 그게 효과가 있을지 모르겠어요.

좋은 생각 있어요?

갱신:

만약 내가 나만의 지시문을 쓴다면(그 방법을 알았다면!) 내가 어떻게 사용하고 싶은지 보여주는 의사 코드가 여기 있다.

<div ng-if="showFrom()">
    From Template Goes Here
</div>
<div ng-if="showCreatedBy()">
    CreatedBy Template Goes Here
</div>
<div ng-if="showTo()">
    To Template Goes Here
</div>

함수/식이 false로 평가되면 이러한 각 항목은 사라집니다.

Angular 1.1.5는 ng-if 지령을 도입했다.그것이 이 문제에 대한 최선의 해결책입니다.이전 버전의 Angular를 사용하는 경우 angular-ui의 ui-if 지시어를 사용하는 것이 좋습니다.

"템플릿의 조건부 논리"에 대한 일반적인 질문에 대한 답을 찾기 위해 이곳에 온 경우 다음 사항을 고려하십시오.

• 1.1.5는 또한 3진 연산자를 도입했다.
• ng-switch를 사용하여 DOM에서 요소를 조건부로 추가하거나 삭제할 수 있습니다.
• 참고 항목: AngularJS에서 CSS 스타일을 조건부로 적용하는 방법

---

원답:

"ng-if" 지시는 그다지 대단하지 않습니다.

myApp.directive('ngIf', function() {
    return {
        link: function(scope, element, attrs) {
            if(scope.$eval(attrs.ngIf)) {
                // remove '<div ng-if...></div>'
                element.replaceWith(element.children())
            } else {
                element.replaceWith(' ')
            }
        }
    }
});

다음 HTML 구문을 사용할 수 있습니다.

<div ng-repeat="message in data.messages" ng-class="message.type">
   <hr>
   <div ng-if="showFrom(message)">
       <div>From: {{message.from.name}}</div>
   </div>    
   <div ng-if="showCreatedBy(message)">
      <div>Created by: {{message.createdBy.name}}</div>
   </div>    
   <div ng-if="showTo(message)">
      <div>To: {{message.to.name}}</div>
   </div>    
</div>

만지작거리다.

replaceWith()는 불필요한 콘텐츠를 DOM에서 삭제하는 데 사용됩니다.

또한 Google+에서 언급했듯이 ng-style은 커스텀 디렉티브 대신 ng-show를 사용하고 싶다면 조건부로 배경 이미지를 로드할 수 있습니다.(다른 독자들의 이익을 위해 두 방법 모두 display: none을 사용하고 DOM에 추가 마크업을 남기기 때문에 피하고 싶습니다.숨겨진 요소에는 대부분의 브라우저에서 로드되는 배경 이미지가 있기 때문에 이 시나리오에서는 특히 문제가 됩니다."
자세한 내용은 "AngularJS에서 CSS 스타일을 조건부로 적용하는 방법"을 참조하십시오.

angular-ui ui-if 디렉티브는 if 조건/식의 변경을 감시합니다.내 건 아니야.따라서 간단한 구현으로 모델이 변경되어 템플릿 출력에만 영향을 미치는 경우 뷰가 올바르게 업데이트되지만 조건/식 답변이 변경되면 뷰가 올바르게 업데이트되지 않습니다.

예를 들어 모델에서 from.name 값이 변경되면 보기가 업데이트됩니다.하지만 만약 당신이delete $scope.data.messages[0].fromfrom 이름은 뷰에서 삭제되지만 if 조건/변환이 감시되지 않기 때문에 템플릿은 뷰에서 삭제되지 않습니다.

ngSwitch 디렉티브를 사용할 수 있습니다.

  <div ng-switch on="selection" >
    <div ng-switch-when="settings">Settings Div</div>
    <span ng-switch-when="home">Home Span</span>
    <span ng-switch-default>default</span>
  </div>

빈 div로 DOM을 로드하지 않으려면 $http를 사용하여 (서브) 템플릿을 로드하고 $compile을 사용하여 특정 조건에 도달했을 때 DOM에 삽입하는 커스텀 디렉티브를 작성해야 합니다.

이것은 (검증되지 않은) 예에 불과하다다음과 같이 최적화할 수 있습니다.

HTML:

<conditional-template ng-model="element" template-url1="path/to/partial1" template-url2="path/to/partial2"></div>

지시:

app.directive('conditionalTemplate', function($http, $compile) {
   return {
      restrict: 'E',
      require: '^ngModel',
      link: function(sope, element, attrs, ctrl) {
        // get template with $http
        // check model via ctrl.$viewValue
        // compile with $compile
        // replace element with element.replaceWith()
      }
   };
});

루프 내의 모든 div 요소에서 ng-show를 사용할 수 있습니다.이것이 당신이 원하는 것입니까? http://jsfiddle.net/pGwRu/2/

<div class="from" ng-show="message.from">From: {{message.from.name}}</div>

언급URL : https://stackoverflow.com/questions/14077471/conditional-logic-in-angularjs-template