AngularJS에서 CSS 스타일을 조건부로 적용하는 방법은 무엇입니까?

AngularJS에서 CSS 스타일을 조건부로 적용하는 방법은 무엇입니까?

Q1. 메인 [삭제]버튼을 누르기 전에 사용자가 삭제 마크를 붙이는 각 [항목]의 모양을 변경한다고 가정합니다.(이러한 시각적 피드백을 통해 "확실한가요?"라는 속담이 있는 대화 상자가 필요하지 않습니다.)삭제해야 할 항목을 나타내는 체크박스가 켜집니다.체크박스를 끄면 해당 항목은 정상 상태로 돌아갑니다.

CSS 스타일링을 적용 또는 삭제하는 가장 좋은 방법은 무엇입니까?

Q2. 각 사용자에게 사이트 표시 방법을 개인화할 수 있도록 허용한다고 가정합니다.예를 들어, 고정된 글꼴 크기에서 선택하고 사용자가 정의할 수 있는 전경색과 배경색 등을 사용할 수 있습니다.

사용자가 선택/입력하는 CSS 스타일을 적용하는 가장 좋은 방법은 무엇입니까?

Angular는 CSS 스타일링을 조건적/동적으로 조작하기 위한 몇 가지 기본 지침을 제공합니다.

• ng-class - CSS 스타일 세트가 스태틱하거나 사전에 알려진 경우 사용합니다.
• ng-style - 스타일 값이 동적으로 변경될 수 있으므로 CSS 클래스를 정의할 수 없을 때 사용합니다.스타일 값의 프로그래밍 가능한 제어를 생각합니다.
• ng-show 및 ng-hide - 표시 또는 숨기기만 필요한 경우 사용합니다(CSS 변경).
• ng-if - 버전 1.1.5의 새로운 기능.단일 조건만 체크할 필요가 있는 경우 보다 상세한ng-switch 대신 를 사용합니다(DOM 변경).
• ng-switch - 여러 ng-show를 상호 배타적으로 사용하는 대신 사용합니다(DOM 변경).
• ng-disabled 및 ng-readonly - 폼 요소의 동작을 제한하기 위해 사용합니다.
• ng-animate - 버전 1.1.4의 새로운 기능으로 CSS3의 이행/애니메이션 추가에 사용

일반적인 "Angular way"는 모델/스코프 속성을 사용자 입력/조작(ng-model 사용)을 받아들이는 UI 요소에 연결한 다음 해당 모델 속성을 위에서 언급한 기본 제공 지침 중 하나에 연결하는 것을 포함합니다.

사용자가 UI를 변경하면 Angular가 페이지의 관련 요소를 자동으로 업데이트합니다.

---

Q1 sounds like a good case for ng-class -- the CSS styling can be captured in a class.

ng-class는 다음 중 하나를 평가해야 하는 "표현"을 받아들입니다.

1. 공백으로 구분된 클래스 이름의 문자열
2. 계급명의 배열
3. 부울값에 대한 클래스 이름의 맵/객체

일부 에 대해 을 사용하여 가 켜져 ng-repeat을 합니다.pending-delete 링크:

<div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
   ... HTML to display the item ...
   <input type="checkbox" ng-model="item.checked">
</div>

위에서 ng-class 식 유형 #3을 사용했습니다.이것은 클래스 이름의 맵/오브젝트입니다.

---

Q2 sounds like a good case for ng-style -- the CSS styling is dynamic, so we can't define a class for this.

ng-style은 다음과 같이 평가해야 하는 "표현"을 받아들입니다.

1. CSS 스타일 이름을 CSS 값에 매핑/객체

예를 들어 사용자가 배경색 텍스트 상자에 색상 이름을 입력할 수 있다고 가정합니다(jQuery 색상 선택기가 훨씬 좋습니다).

<div class="main-body" ng-style="{color: myColor}">
   ...
   <input type="text" ng-model="myColor" placeholder="enter a color name">

---

만지작거리다 for both of the above.

이 바이올린에는 ng-show 및 ng-hide의 예도 포함되어 있습니다.체크박스를 켜면 배경색이 분홍색으로 변할 뿐만 아니라 텍스트도 표시됩니다.텍스트 상자에 '빨간색'을 입력하면 div가 숨겨집니다.

테이블 전체에 하나의 클래스를 이미 적용했을 때 테이블 요소 내에 클래스를 적용할 때 문제가 발견되었습니다(홀수 행에 적용되는 색상 등).<myClass tbody tr:nth-child(even) td>). Developer Tools로 요소를 검사하면,element.style할당된 스타일이 없습니다. 래 so so so so so so so so so so so so so를 사용합니다.ng-class , 을 사용해 .ng-style은 CSS Atribut에 element.style는 나에게

<tr ng-repeat="element in collection">

    [...amazing code...]

    <td ng-style="myvar === 0 && {'background-color': 'red'} ||
                  myvar === 1 && {'background-color': 'green'} ||
                  myvar === 2 && {'background-color': 'yellow'}">{{ myvar }}</td>

    [...more amazing code...]

</tr>

Myvar는 내가 평가하는 것이고, 각각의 경우에 나는 스타일을 적용한다.<td>myvar 값에 따라 테이블 전체에 대해 CSS 클래스에서 적용되는 현재 스타일을 덮어씁니다.

갱신하다

예를 들어 페이지를 방문하거나 다른 경우에 클래스를 테이블에 적용하는 경우 다음 구조를 사용할 수 있습니다.

<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">

기본적으로 ng-class를 활성화하기 위해 필요한 것은 적용할 클래스와 true 또는 false 스테이트먼트입니다.True는 클래스를 적용하고 false는 적용하지 않습니다.페이지 경로와 그 사이의 OR에 대한 2개의 체크가 있기 때문에/route_a 또는 우리는 안에 있습니다.route_b액티브 클래스가 적용됩니다.

이 기능은 오른쪽에 true 또는 false를 반환하는 논리함수만 있습니다.

첫 번째 예에서는 ng-style은 3개의 문장으로 구성됩니다.모든 것이 false일 경우 스타일은 적용되지 않지만 우리의 논리에 따라 적어도1개의 변수가 적용됩니다.따라서 논리식은 어떤 변수 비교가 참인지 체크합니다.빈 배열이 항상 참인지 확인할 수 있기 때문에 어레이는 반환으로 남습니다.이것은 응답 전체에 OR을 사용하고 있는 것을 고려하면 true가 1개뿐입니다.ining이 적용됩니다.

덧붙여서, 저는 당신에게 isActive() 함수를 주는 것을 잊었습니다.

$rootScope.isActive = function(viewLocation) {
    return viewLocation === $location.path();
};

새로운 갱신

여기 내가 정말 유용하다고 생각하는 것이 있다.변수 값에 따라 클래스를 적용해야 하는 경우(예: 아이콘은 다음과 같이)div, 다음의 코드를 사용할 수 있습니다(매우 편리합니다).ng-repeat):

<i class="fa" ng-class="{ 'fa-github'   : type === 0,
                          'fa-linkedin' : type === 1,
                          'fa-skype'    : type === 2,
                          'fa-google'   : type === 3 }"></i>

Font Awesome의 아이콘

이는 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 class="circle circle-{{selectcss(document.Extension)}}">

및 코드

$scope.selectcss = function (data) {
    if (data == '.pdf')
        return 'circle circle-pdf';
    else
        return 'circle circle-small';
};

css

.circle-pdf {
    width: 24px;
    height: 24px;
    font-size: 16px;
    font-weight: 700;
    padding-top: 3px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background-image: url(images/pdf_icon32.png);
}

이 솔루션은 나에게 효과가 있었다

<a ng-style="{true: {paddingLeft: '25px'}, false: {}}[deleteTriggered]">...</a>

삼진법을 사용할 수 있습니다.여기에는 다음 두 가지 방법이 있습니다.

<div ng-style="myVariable > 100 ? {'color': 'red'} : {'color': 'blue'}"></div>

아니면...

<div ng-style="{'color': (myVariable > 100) ? 'red' : 'blue' }"></div>

1개 또는 2개의 속성으로 구성된 단순한 css 스타일이 필요한 경우 다음 옵션을 사용할 수 있습니다.

표시:

<tr ng-repeat="element in collection">
    [...amazing code...] 
    <td ng-style="{'background-color': getTrColor(element.myvar)}">
        {{ element.myvar }}
    </td>
    [...more amazing code...]
</tr>

컨트롤러:

$scope.getTrColor = function (colorIndex) {
    switch(colorIndex){
        case 0: return 'red';
        case 1: return 'green';
        default: return 'yellow';
    }
};

다음의 예를 참조해 주세요.

<!DOCTYPE html>
    <html ng-app>
    <head>
    <title>Demo Changing CSS Classes Conditionally with Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="res/js/controllers.js"></script>

    <style>

    .checkboxList {
        border:1px solid #000;
        background-color:#fff;
        color:#000;
        width:300px;
        height: 100px;
        overflow-y: scroll;
    }

    .uncheckedClass {
       background-color:#eeeeee;
       color:black;
    }
    .checkedClass {
        background-color:#3ab44a;
        color:white;
    }
    </style>

    </head>
    <body ng-controller="TeamListCtrl">
    <b>Teams</b>
    <div id="teamCheckboxList" class="checkboxList">

    <div class="uncheckedClass" ng-repeat="team in teams" ng-class="{'checkedClass': team.isChecked, 'uncheckedClass': !team.isChecked}">

    <label>
    <input type="checkbox" ng-model="team.isChecked" />
    <span>{{team.name}}</span>
    </label>
    </div>
    </div>
    </body>
    </html>

각도 기준JS v1.2.0rc,ng-class그리고 심지어ng-attr-classSVG 요소에서 실패(클래스 속성 내의 일반 바인딩에서도 이전에 동작했습니다)

구체적으로는, 현재는, 다음의 어느 것도 기능하지 않습니다.

ng-class="current==this_element?'active':' ' "
ng-attr-class="{{current==this_element?'active':' '}}"
class="class1 class2 .... {{current==this_element?'active':''}}"

이 문제를 해결하려면

ng-attr-otherAttr="{{current==this_element?'active':''}}"

그 다음에 스타일링크를 사용하여 스타일링 합니다.

[otherAttr='active'] {
   ... styles ...
}

(향후) 스타일을 조건부로 적용하는 또 다른 방법은 스코프 스타일을 조건부로 작성하는 것입니다.

<style scoped type="text/css" ng-if="...">

</style>

하지만 요즘은 Fire Fox만 스코프 스타일을 지원합니다.

스타일 요소 내에서 CSS 규칙을 변경할 수 있으므로 ng-style, ng-class, ng-show, ng-hide, ng-animate 등의 각도 지시어를 반복 사용할 필요가 없기 때문에 유용한 옵션이 하나 더 있습니다.

이 옵션은 컨트롤러에 의해 설정되고 "커스텀 스타일"이라고 불리는 속성 디렉티브에 의해 감시되는 서비스 변수를 가진 서비스를 사용합니다.이 전략은 여러 가지 방법으로 사용할 수 있으며, 이 바이올린으로 일반적인 지침을 제공하려고 했습니다.

var app = angular.module('myApp', ['ui.bootstrap']);
app.service('MainService', function(){
    var vm = this;
});
app.controller('MainCtrl', function(MainService){
    var vm = this;
    vm.ms = MainService;
});
app.directive('customStyle', function(MainService){
    return {
        restrict : 'A',
        link : function(scope, element, attr){
            var style = angular.element('<style></style>');
            element.append(style);
            scope.$watch(function(){ return MainService.theme; },
                function(){
                    var css = '';
                    angular.forEach(MainService.theme, function(selector, key){
                        angular.forEach(MainService.theme[key], function(val, k){
                            css += key + ' { '+k+' : '+val+'} ';
                        });                        
                    });
                    style.html(css);
                }, true);
        }
    };
});

음, 나는 당신이 true 또는 false를 반환하는 함수로 당신의 컨트롤러의 상태를 체크할 것을 제안합니다.

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

컨트롤러에서 상태를 확인합니다.

$scope.getTodayForHighLight = function(today, date){
    return (today == date);
}

주의할 점은 CSS 스타일에 대시가 있는 경우 대시를 삭제해야 한다는 것입니다.그래서 만약 당신이 세팅하고 싶다면background-color올바른 방법은 다음과 같습니다.

ng-style="{backgroundColor:myColor}" 

비활성화 버튼에 회색 텍스트 스타일을 조건부로 적용한 방법

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  styleUrls: [ './app.component.css' ],
  template: `
  <button 
    (click)='buttonClick1()' 
    [disabled] = "btnDisabled"
    [ngStyle]="{'color': (btnDisabled)? 'gray': 'black'}">
    {{btnText}}
  </button>`
})
export class AppComponent  {
  name = 'Angular';
  btnText = 'Click me';
  btnDisabled = false;
  buttonClick1() {
    this.btnDisabled = true;
    this.btnText = 'you clicked me';
    setTimeout(() => {
      this.btnText = 'click me again';
      this.btnDisabled = false
      }, 5000);
  }
}

하다
https://stackblitz.com/edit/example-conditional-disable-button?file=src%2Fapp%2Fapp.component.htmlhttpsstackblitz.com/edit/?file=src%2Fapp%2Fapp.component.html

언급URL : https://stackoverflow.com/questions/13813254/how-do-i-conditionally-apply-css-styles-in-angularjs