각도를 사용하여 렌더링 조건 만들기JS

각도를 사용하여 렌더링 조건 만들기JS

조건에 따라 돔 요소를 표시하거나 숨기는 AngularJS의 뷰 조건을 만드는 방법을 알고 있습니다.

<div ng-show="{{isTrue}}">Some content</div>

div를 렌더링할지 여부를 결정하는 렌더링 조건을 작성하려면 어떻게 해야 합니까?

angularjs 1.1.5 이상 사용자에 대한 업데이트(1.0.7에서는 지원되지 않음):

관련 커밋: https://github.com/angular/angular.js/commit/2f96fbd17577685bc013a4f7ced06664af253944

이제 Angular에는 조건부 렌더링 명령이 있습니다.ngIf.

사용방법:

<div ng-if="conditional_expression"></div>

ngIf를 사용하여 요소를 제거할 때 해당 범위가 파괴되고 요소가 복원될 때 새 범위가 생성됩니다.

문서: directive-ngIf

레거시 angularjs 사용자의 경우:

ngShowdirective는 요소를 조건부로 숨기거나 숨깁니다.이것은 새로운 안정 릴리스 중 하나에서 변경될 예정입니다.이 릴리스는unstable와 마찬가지로 해방하다1.1.5.

DOM 상의 아이템을 조건부로 추가/삭제하는 경우는, 를 사용해 주세요.ngSwitch.

<div ng-switch="showMe">
    <div ng-switch-when="true">Hello!</div>
</div>

실제로 이 지시문은 1건 이상의 사례를 처리하기 위해 작성되었지만, 그 방법으로도 사용할 수 있습니다.보다 고도의 사용 방법의 예에 대해서는, 이 회답을 참조해 주세요.

권장되는 방법은 ng-include를 사용하는 것입니다.

예: http://jsfiddle.net/api/post/library/pure/

<div ng-app="">
  <div ng-controller="Ctrl">
    <select ng-model="template" ng-options="t.name for t in templates">
     <option value="">(blank)</option>
    </select>
    url of the template: <tt>{{template.url}}</tt>
    <hr/>
    <div ng-include src="template.url"></div>
  </div>


  <!-- template1.html -->
  <script type="text/ng-template" id="template1.html">
    Content of template1.html
  </script>

  <!-- template2.html -->
  <script type="text/ng-template" id="template2.html">
    Content of template2.html
  </script>
</div>

여기에는 적어도 두 가지 방법이 있습니다.

• 템플리트를 사용하여 일부를 렌더링하다
• 조건부 렌더링 함수와 함께 간단한 식을 사용합니다(이 바이올린과 아래 설명을 참조하십시오).

심플한 컴포넌트는 렌더링 기능을 그대로 사용할 것을 권장합니다.매우 이해하기 쉽다.

$scope.render = function(condition) {        
   return condition ? "This is rendered when condition == TRUE" : "This is rendered when condition == FALSE";
};

HTML에 포함시키면 다음과 같이 됩니다.

{{render(true)}}

각도 지시로 마무리할 수도 있고, 매우 좋은 마크업과 무한한 가능성을 제공합니다!

각도 의를 보세요. if지시.이게 당신에게 도움이 될 거라고 믿어요.

언급URL : https://stackoverflow.com/questions/14475284/make-a-render-condition-with-angularjs