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> <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 만 나타납니다.
