조건부로 angular.js에 요소 특성을 추가합니다.
is_autoplay 스코프 변수를 기반으로 비디오 태그에 자동 재생 속성을 추가하려고 합니다.
인터넷을 다 뒤졌지만 원하는 정확한 토막을 찾을 수 없었습니다.
저는 따라 해보았지만 아무 것도 작동이 안 돼요.
<video autoplay="{{is_autoplay ? 'true' : 'false'}}">
...
<video ng-attr-autoplay="{is_autoplay}">
...
누군가는 다음과 같이 제안하기도 했습니다.
<video {{is_autoplay ? "autoplay" : ""}}>
...
다음은 저의 문제를 해결해 주었습니다.
app.directive('attronoff', function() {
return {
link: function($scope, $element, $attrs) {
$scope.$watch(
function () { return $element.attr('data-attr-on'); },
function (newVal) {
var attr = $element.attr('data-attr-name');
if(!eval(newVal)) {
$element.removeAttr(attr);
}
else {
$element.attr(attr, attr);
}
}
);
}
};
});
누구나 이 지시어를 사용하여 조건부로 속성을 추가/제거할 수 있습니다.
Usage
<video width="100%" height="100%" controls attronoff data-attr-on="{{is_autoplay}}" data-attr-name="autoplay">
...
한 가지 간단한 해결책은 다음과 같습니다.ng-if조건에 따라 돔을 생성합니다.
예를 들어, 당신의 경우,
<video autoplay="true" ng-if="is_autoplay">...</video>
<video ng-if="!is_autoplay">...</video>
그래서 만약에is_autoplay가true, 첫번째 요소는 다음과 함께 생성될 것입니다.autoplayattribute와 second on은 dom에 포함되지 않습니다.
한다면is_autoplay가false, 두번째 돔 요소는 다음을 제외하고 생성됩니다.autoplay속성.
is_autoplay 속성에 따라 자동 재생 속성을 직접 설정할 수도 있습니다.
<video autoplay="{{is_autoplay}}">...</video>
언급URL : https://stackoverflow.com/questions/24136040/conditionally-add-an-element-attribute-in-angular-js
'programing' 카테고리의 다른 글
| npm 설치를 실행할 때 첫 번째 인증서를 확인할 수 없음 (0) | 2023.10.31 |
|---|---|
| UI 부트스트랩 팝업: 너비 변경 (0) | 2023.10.31 |
| "Increct Content-Type:" 예외는 각도 mvc 6 응용 프로그램을 던집니다. (0) | 2023.10.31 |
| jquery를 사용하여 통화를 올바르게 포맷하려면 어떻게 해야 합니까? (0) | 2023.10.31 |
| 두 개의 열을 사용하여 데이터 피벗 (0) | 2023.10.31 |