AngularJS 템플릿의 조건부 논리

AngularJS 템플릿의 조건부 논리

---

다음과 같은 각도 템플릿이 있습니다.

<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"div가 조건부로 표시되도록하는 것입니다.

로그는 이것입니다 ...

• 데이터에 "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>

함수 / 표현식이 거짓으로 평가되면 이들 각각이 사라집니다.

---

Angular 1.1.5는 ng-if 지시문을 도입했습니다 . 이것이이 특정 문제에 대한 최상의 솔루션입니다. 이전 버전의 Angular를 사용하는 경우 angular-ui의 ui-if 지시문을 사용하는 것이 좋습니다.

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

• 1.1.5는 삼항 연산자 도 도입했습니다.
• 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에서 불필요한 콘텐츠를 제거하는 데 사용됩니다.

Also, as I mentioned on Google+, ng-style can probably be used to conditionally load background images, should you want to use ng-show instead of a custom directive. (For the benefit of other readers, Jon stated on Google+: "both methods use ng-show which I'm trying to avoid because it uses display:none and leaves extra markup in the DOM. This is a particular problem in this scenario because the hidden element will have a background image which will still be loaded in most browsers.").
See also How do I conditionally apply CSS styles in AngularJS?

The angular-ui ui-if directive watches for changes to the if condition/expression. Mine doesn't. So, while my simple implementation will update the view correctly if the model changes such that it only affects the template output, it won't update the view correctly if the condition/expression answer changes.

E.g., if the value of a from.name changes in the model, the view will update. But if you delete $scope.data.messages[0].from, the from name will be removed from the view, but the template will not be removed from the view because the if-condition/expression is not being watched.

---

You could use the ngSwitch directive:

  <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>

If you don't want the DOM to be loaded with empty divs, you need to create your custom directive using $http to load the (sub)templates and $compile to inject it in the DOM when a certain condition has reached.

This is just an (untested) example. It can and should be optimized:

HTML:

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

Directive:

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()
      }
   };
});

---

You can use ng-show on every div element in the loop. Is this what you've wanted: 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