anglejs if 문?
https://stackoverflow.com//questions/12666307
-
11-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
그래서 저는 AngularJS 튜토리얼을 진행하고 있습니다:
컨트롤러에 배열이 정의되어 있고 ng-repeat {{feature.name}} {{feature.description}}을 통해 반복할 때 호출하여 배열의 다른 지점을 반환합니다.
내가 이해하지 못하는 것은 배열에 "중요도"라는 세 번째 점이 있고 1에서 10까지의 숫자라고 가정해 보겠습니다.해당 숫자를 HTML에 표시하고 싶지는 않지만 배열의 "중요도" 숫자가 10 대 1인 경우 기능에 다른 색상을 적용하고 싶습니다.
그러면 이를 수행하기 위해 if 문을 어떻게 작성해야 합니까?
즉.
<p style="**insert if statement: {{if feature.importance == 10}} color:red; {{/if}} **">{{feature.description}}</p>
그게 맞는지는 모르겠지만 그게 내가 하고 싶은 일이야
해결책 7
이 첫 번째 것은 뭔가가 한 번만 DOM에만 있어야하는지 여부를 평가하고 페이지에 시계 수신기를 추가하지 못하는 지시문입니다.
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');
});
}
}
};
}
};
});
이 두 번째는 시계 리스너없이 한 번만 요소에 속성을 적용하는 지시문입니다.
i.e.
<div set-attr="{ data-id : post.id, data-name : { value : post.name, condition : post.name != 'FOO' } }"></div>
angular.module('setAttr',[]).directive('setAttr', function() {
return {
restrict: 'A',
priority: 100,
link: function(scope,elem,attrs) {
if(attrs.setAttr.indexOf('{') != -1 && attrs.setAttr.indexOf('}') != -1) {
//you could just angular.isObject(scope.$eval(attrs.setAttr)) for the above but I needed it this way
var data = scope.$eval(attrs.setAttr);
angular.forEach(data, function(v,k){
if(angular.isObject(v)) {
if(v.value && v.condition) {
elem.attr(k,v.value);
elem.removeAttr('set-attr');
}
} else {
elem.attr(k,v);
elem.removeAttr('set-attr');
}
});
}
}
}
});
물론 각도로 내장 된 동적 버전을 사용할 수 있습니다 :
<div ng-class="{ 'myclass' : item.iscool }"></div>
Angularui 팀이 만든 angularjs에 의해 UI-replaces를 사용하는 Angularjs가 추가 할 수있는 새로운 NG-Adduct를 사용할 수 있습니다.
<div ng-if="item.iscool"></div>
다른 팁
없는 것 같아요 if 진술 가능.고객님의 스타일링 목적에 따라 ng-class 사용할 수 있습니다.
<p ng-class="{important: feature.importance == 10 }">
ng-switch 또한 편리합니다.
-- 업데이트 --
보세요:https://stackoverflow.com/a/18021855/1238847
angle1.2.0RC는 ng-if를 지원하는 것 같습니다.
실제로 각도 1.2.0의 삼원 연산자가 있습니다
.<p style="{{feature.importance == 10 ? 'color:red' : ''}}">{{feature.description}}</p>
답변이 업데이트가 필요하다고 생각합니다.
이전에는 Angularui 프로젝트에서 NGIF 지시문을 사용할 수 있습니다 (코드 여기에 아직 다운로드하고 싶다면) 나쁜 뉴스는 더 이상 유지되지 않는다는 것입니다.
좋은 소식은 공식 Angularjs Repo ( 불안정한 지점 ) 안정된 1 억제
.
<div ng-if="something"> Foo bar </div>
ng-class는 아마도 귀하의 문제에 대한 가장 좋은 답변 일 것입니다. 그러나 Angularui는 "if"지시문 :
검색 : 숨기기 대신 돔에서 요소를 완전히 제거하십시오.
현재의 달에 상대적인 레이블이나 입력으로 데이터 값을 레이블이나 입력으로 렌더링 해야하는지 여부를 결정하는 데 사용했습니다.
<tbody id="allocationTableBody">
<tr ng-repeat="a in data.allocations">
<td>{{a.monthAbrv}}</td>
<td ui-if="$index < currentMonth">{{a.amounts[0]}}</td>
</tr>
</tbody>
우선 순위가 레이블이 될 경우 이전이므로 다음과 같이 NG 클래스 내부를 사용할 스위치 필터를 만들 수 있습니다. https:/stackoverflow.com/a/8309832/1036025 (스위치 필터 코드의 경우)
<p ng-class="feature.importance|switch:{'Urgent':'red', 'Warning': 'orange', 'Normal': 'green'}">...</p>
아래의 코드 줄을 시도 할 수도 있습니다
<div class="{{is_foo && foo.bar}}">
is_foo가 true 인 경우 foo.bar를 보여줍니다.
도 작동하는 것도 다음과 같습니다.
<span>{{ varWithValue || 'If empty use this string' }}</span>
