AngularJS ng-style의 개념
이 기사에서는 조건식을 사용하여 AngularJS ng-style을 살펴봅니다. ng-style 지시문은 스타일을 HTML 요소에 바인딩합니다.
요소의 스타일을 동적으로 업데이트해야 할 때 사용됩니다.
AngularJS ng-style 지시어
ng-style은 조건식과 함께 사용되어 일부 조건에 따라 HTML 요소의 스타일을 동적으로 설정할 수 있습니다.
예를 들어 버튼이 있고 마우스를 가져가는 색상에 따라 색상이 달라지도록 하려면 조건식과 함께 ng-style을 사용하고 버튼의 배경 색상을 종속적으로 설정합니다. 마우스를 올려 놓고 있는지 여부.
ng-style 구문:
<ANY ng-style="Any Conditional or non-conditional expression"></ANY>
ng-style 지시문의 값은 조건부 이진 또는 삼항 식일 수 있습니다. 또한 컨트롤러가 필요에 따라 관리할 수 있는 콘솔 내에 정의된 모든 콜백 함수를 수신합니다.
또한 ng-style 지시문을 사용하여 지정된 값을 기반으로 디스플레이 및 CSS 스타일을 관리하여 ng-style이 호출되고 모델 값이 변경될 때 CSS 스타일이 업데이트되도록 할 수 있습니다.
ng-style 지시문은 우선 순위 0에서 호출되며 삽입 제한이 거의 없습니다. 일부 CSS 스타일 이름은 ng-style 개체에 유효한 키워드가 아니기 때문에 항상 작은따옴표 안에 CSS 스타일 키를 두는 것이 중요합니다.
마지막으로 ng-style 지시문은 동적 콘텐츠로 반응형 디자인을 만들려는 개발자를 위한 강력한 도구라고 말할 수 있습니다. 애니메이션 및 전환을 생성하고 다양한 장치 크기 등에 다양한 스타일을 적용할 수 있습니다.
AngularJS에서 ng-Style 지시문을 사용하는 단계
AngularJS에서 ng-style 지시문을 사용하려면 다음 단계가 필요합니다.
- HTML 요소에
ng-style지시문을 추가합니다. - 중괄호 안에 스타일 콘텐츠를 추가합니다.
- 주어진 CSS 속성에 대한 값으로 스타일 속성을 추가합니다. ng-style 지시문은 색상, 글꼴 및 배경색을 포함한 모든 CSS 속성을 지원합니다.
AngularJS의 ng-style 지시문 예
AngularJS ng-style을 더 잘 이해하기 위한 예를 살펴보겠습니다.
자바스크립트 코드:
var app = angular.module('ngStyleApp', []);
app.controller('ngStyle', function($scope) {
$scope.bar = "88%";
});
HTML 코드:
<!DOCTYPE html>
<html>
<head>
<style>
.mainColor {
background-color: pink;
}
.AvenColor {
background-color: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="ngStyleApp" ng-controller="ngStyle">
<div class="mainColor">
<div class="AvenColor" ng-style="{'width':bar}">
<h1> {{bar}} Profile Complete</h1>
</div>
</div>
</body>
</html>
위에서 언급한 대로 코드의 라이브 데모를 테스트하려면 여기를 클릭하십시오.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook