angular.js의 인라인 조건

ng-show 등을 사용하지 않고 콘텐츠를 조건부로 표시하는 방법이 각도인지 궁금합니다. 예를 들어 backbone.js에서 다음과 같은 템플릿에서 인라인 콘텐츠로 무언가를 수행 할 수 있습니다.

<% if (myVar === "two") { %> show this<% } %>

하지만 각도에서는 html 태그로 싸인 것을 표시하거나 숨기는 것으로 제한됩니다.

<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>

html 태그로 콘텐츠를 줄 바꿈하는 대신 {{}}을 사용하여 인라인 콘텐츠를 조건부로 표시하고 숨기려면 각도에서 권장되는 방법은 무엇입니까?

편집 : 2Toad의 답변 은 당신이 찾고있는 것입니다! 저것을 찬성하십시오

Angular <= 1.1.4를 사용하는 경우이 답변은 다음과 같습니다.

이것에 대한 또 하나의 대답. 가능한 솔루션 목록보다 솔루션에 대한 "정확한"시도이기 때문에 별도의 답변을 게시하고 있습니다.

다음은 "즉시 if"(일명 iif)를 수행하는 필터입니다.

app.filter('iif', function () {
   return function(input, trueValue, falseValue) {
        return input ? trueValue : falseValue;
   };
});

다음과 같이 사용할 수 있습니다.

{{foo == "bar" | iif : "it's true" : "no, it's not"}}

Angular 1.1.5 는 삼항 연산자에 대한 지원을 추가했습니다.

{{myVar === "two" ? "it's true" : "it's false"}}

이 고양이를 피부에 바르는 수천 가지 방법. 귀하가 {{}} 사이에서 특별히 요구하는 것을 알고 있지만 여기에 오는 다른 사람들에게는 다른 옵션 중 일부를 보여줄 가치가 있다고 생각합니다.

$ scope에서 기능 (IMO, 이것은 대부분의 시나리오에서 가장 좋은 방법입니다) :

  app.controller('MyCtrl', function($scope) {
      $scope.foo = 1;

      $scope.showSomething = function(input) {
           return input == 1 ? 'Foo' : 'Bar';
      };
   });

 <span>{{showSomething(foo)}}</span>

물론 ng-show 및 ng-hide :

 <span ng-show="foo == 1">Foo</span><span ng-hide="foo == 1">Bar</span>

ngSwitch

 <div ng-switch on="foo">
   <span ng-switch-when="1">Foo</span>
   <span ng-switch-when="2">Bar</span>
   <span ng-switch-default>What?</span>
 </div>

Bertrand가 제안한 맞춤형 필터. (이것은 당신이 똑같은 일을 계속해야한다면 가장 좋은 선택입니다)

app.filter('myFilter', function() {
   return function(input) {
     return input == 1 ? 'Foo' : 'Bar';
   }
}

{{foo | myFilter}}

또는 사용자 지정 지시문 :

app.directive('myDirective', function() {
   return {
     restrict: 'E',
     replace: true,
     link: function(scope, elem, attrs) {
       scope.$watch(attrs.value, function(v) {
          elem.text(v == 1 ? 'Foo': 'Bar');
       });
     }
   };
});


<my-directive value="foo"></my-directive>

개인적으로 대부분의 경우 내 범위에서 함수를 사용하여 마크 업을 깔끔하게 유지하고 빠르고 쉽게 구현할 수 있습니다. 그렇지 않으면, 당신은 똑같은 일을 반복해서 반복하게 될 것입니다.이 경우 Bertrand의 제안에 따라 상황에 따라 필터 또는 지시어를 만들 것입니다.

항상 그렇듯이 가장 중요한 것은 솔루션을 유지 관리하기 쉽고 테스트 할 수 있다는 것입니다. 그리고 그것은 당신의 특정한 상황에 전적으로 달려 있습니다.

ng-class를 사용할 수없는 경우 (예 : SVG 스타일링) 클래스 attr을 조건부로 설정하려면 다음을 사용하고 있습니다.

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

다른 속성 유형에도 동일한 접근 방식이 적용됩니다.

(ng-attr-를 사용하려면 최신 불안정한 각도에 있어야한다고 생각합니다. 현재 1.1.4입니다.)

AngularJS + SVG를 사용하여이 문제와 관련 문제에 대해 설명하는 기사를 게시했습니다. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

변수 내용을 확인하고 기본 텍스트를 사용하려면 다음을 사용할 수 있습니다.

<span>{{myVar || 'Text'}}</span>

내가 잘 이해했다면 두 가지 방법이 있다고 생각합니다.

먼저 ngSwitch를 시도 하고 두 번째 가능한 방법은 자신 만의 필터를 만드는 것 입니다. 아마도 ngSwitch가 올바른 방법 일 것입니다. 그러나 {{}} 필터를 사용하여 인라인 컨텐츠를 숨기거나 표시하려면 이동하는 것이 좋습니다.

다음은 간단한 필터 가있는 바이올린 입니다.

<div ng-app="exapleOfFilter">
  <div ng-controller="Ctrl">
    <input ng-model="greeting" type="greeting">
      <br><br>
      <h1>{{greeting|isHello}}</h1>
  </div>
</div>

angular.module('exapleOfFilter', []).
  filter('isHello', function() {
    return function(input) {
      // conditional you want to apply
      if (input === 'hello') {
        return input;
      }
      return '';
    }
  });

function Ctrl($scope) {
  $scope.greeting = 'hello';
}

Angular UI 라이브러리에는 angular ui 1.1.4까지 템플릿 /보기의 조건에 대한 지시어 ui-if가 내장되어 있습니다.

예 : UI 1.1.4까지 Angular UI 지원

<div ui-if="array.length>0"></div>

ng-if 1.1.4 이후의 모든 각도 버전에서 사용 가능

<div ng-if="array.length>0"></div>

배열 변수에 데이터가 있으면 div 만 나타납니다.

따라서 Angular 1.5.1에서는 (다른 MEAN 스택 종속성에 대한 기존 앱 종속성이 있었기 때문에 현재 1.6.4를 사용하지 않는 이유입니다)

이것은 OP 말처럼 나를 위해 작동합니다 {{myVar === "two" ? "it's true" : "it's false"}}

{{vm.StateName === "AA" ? "ALL" : vm.StateName}}

값이 "0"일 때 "없음"을 표시하려는 경우 다음과 같이 사용할 수 있습니다.

<span> {{ $scope.amount === "0" ?  $scope.amount : "None" }} </span>

또는 각도 js에서 true false

<span> {{ $scope.amount === "0" ?  "False" : "True" }} </span>

이국적인 상황에서도 작동합니다.

<br ng-show="myCondition == true" />

나는 내 믹스를 던질 것이다 :

https://gist.github.com/btm1/6802312

이렇게하면 if 문이 한 번 평가되고 감시 수신기가 추가되지 않지만 set-if wait-for = "somedata.prop"가있는 요소에 추가 속성을 추가 할 수 있으며 해당 데이터 또는 속성이 설정 될 때까지 기다립니다. if 문을 한 번 평가합니다. XHR 요청의 데이터를 기다리는 경우 추가 속성이 매우 유용 할 수 있습니다.

angular.module('setIf',[]).directive('setIf',function () {
    return {
      transclude: 'element',
      priority: 1000,
      terminal: true,
      restrict: 'A',
      compile: function (element, attr, linker) {
        return function (scope, iterStartElement, attr) {
          if(attr.waitFor) {
            var wait = scope.$watch(attr.waitFor,function(nv,ov){
              if(nv) {
                build();
                wait();
              }
            });
          } else {
            build();
          }

          function build() {
            iterStartElement[0].doNotMove = true;
            var expression = attr.setIf;
            var value = scope.$eval(expression);
            if (value) {
              linker(scope, function (clone) {
                iterStartElement.after(clone);
                clone.removeAttr('set-if');
                clone.removeAttr('wait-for');
              });
            }
          }
        };
      }
    };
  });