inline 조건부(angular.display)를 지정합니다.

inline 조건부(angular.display)를 지정합니다.

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 태그로 콘텐츠를 감싸지 않고 {{}}을(를) 사용하여 인라인 콘텐츠를 조건부로 각도 표시 및 숨기기 위해 권장되는 각도 표시 방법은 무엇입니까?

각도 1.1.5는 3진 연산자에 대한 지원이 추가되었습니다.

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

편집: 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"}}

이 고양이의 가죽을 벗기는 방법은 수천 가지야구체적으로 {{}}}개 정도라고 하는 것은 알고 있습니다만, 여기에 오신 분들은 다른 선택지를 보여드리는 것도 좋을 것 같습니다.

$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(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 스타일링 시) 클래스 속성을 조건부로 설정하기 위해 다음을 사용합니다.

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

다른 어트리뷰트 타입에서도 같은 어프로치를 사용할 수 있습니다.

(ng-attr-를 사용하려면 최신의 불안정한 Angular를 사용해야 한다고 생각합니다.저는 현재 1.1.4입니다.)

Angular와 함께 일하는 것에 대한 기사를 실었습니다.JS+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 라이브러리에는 템플릿/Views angular ui 1.1.4까지의 조건에 대한 디렉티브 UI if가 내장되어 있습니다.

예:UI 1.1.4까지 Angular UI 지원

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

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

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

배열 변수에 데이터가 있으면 div만 표시됩니다.

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

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

또는 각도 js의 true false

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

따라서 Angular 1.5.1에서는 (기존 앱이 다른 MEAN 스택에 의존했기 때문에 현재 1.6.4를 사용하지 않습니다.)

은 OP라고 가 있다.{{myVar === "two" ? "it's true" : "it's false"}}

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

이국적인 상황에서도 기능:

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

내 것도 섞을게

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

if 문을 한 번 평가하고 watch listener를 추가하지 않지만 wait-for="somedata.prop"라는 set-if가 있는 요소에 추가 속성을 추가할 수 있습니다. 그러면 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');
              });
            }
          }
        };
      }
    };
  });

좀 더 최근의 각도, 6+인 것 같아.ng-template에는 태그 식별자에 대한 조건부 후킹이 있습니다.

<div *ngIf="myVar else myVarNo">Yes</div>
<ng-template #myVarNo><div>No</div></ng-template>

언급URL : https://stackoverflow.com/questions/14164371/inline-conditionals-in-angular-js