目录搜索
AngularJS API Referenceautoauto/serviceauto/service/$injectorauto/service/$providengng/directiveng/directive/ang/directive/formng/directive/inputng/directive/input[checkbox]ng/directive/input[date]ng/directive/input[dateTimeLocal]ng/directive/input[email]ng/directive/input[month]ng/directive/input[number]ng/directive/input[radio]ng/directive/input[text]ng/directive/input[time]ng/directive/input[url]ng/directive/input[week]ng/directive/ngAppng/directive/ngBindng/directive/ngBindHtmlng/directive/ngBindTemplateng/directive/ngBlurng/directive/ngChangeng/directive/ngCheckedng/directive/ngClassng/directive/ngClassEvenng/directive/ngClassOddng/directive/ngClickng/directive/ngCloakng/directive/ngControllerng/directive/ngCopyng/directive/ngCspng/directive/ngCutng/directive/ngDblclickng/directive/ngDisabledng/directive/ngFocusng/directive/ngFormng/directive/ngHideng/directive/ngHrefng/directive/ngIfng/directive/ngIncludeng/directive/ngInitng/directive/ngKeydownng/directive/ngKeypressng/directive/ngKeyupng/directive/ngListng/directive/ngModelng/directive/ngModelOptionsng/directive/ngMousedownng/directive/ngMouseenterng/directive/ngMouseleaveng/directive/ngMousemoveng/directive/ngMouseoverng/directive/ngMouseupng/directive/ngNonBindableng/directive/ngOpenng/directive/ngPasteng/directive/ngPluralizeng/directive/ngReadonlyng/directive/ngRepeatng/directive/ngSelectedng/directive/ngShowng/directive/ngSrcng/directive/ngSrcsetng/directive/ngStyleng/directive/ngSubmitng/directive/ngSwitchng/directive/ngTranscludeng/directive/ngValueng/directive/scriptng/directive/selectng/directive/textareang/filterng/filter/currencyng/filter/dateng/filter/filterng/filter/jsonng/filter/limitTong/filter/lowercaseng/filter/numberng/filter/orderByng/filter/uppercaseng/functionng/function/angular.bindng/function/angular.bootstrapng/function/angular.copyng/function/angular.elementng/function/angular.equalsng/function/angular.extendng/function/angular.forEachng/function/angular.fromJsonng/function/angular.identityng/function/angular.injectorng/function/angular.isArrayng/function/angular.isDateng/function/angular.isDefinedng/function/angular.isElementng/function/angular.isFunctionng/function/angular.isNumberng/function/angular.isObjectng/function/angular.isStringng/function/angular.isUndefinedng/function/angular.lowercaseng/function/angular.moduleng/function/angular.noopng/function/angular.toJsonng/function/angular.uppercaseng/objectng/object/angular.versionng/providerng/provider/$animateProviderng/provider/$compileProviderng/provider/$controllerProviderng/provider/$filterProviderng/provider/$httpProviderng/provider/$interpolateProviderng/provider/$locationProviderng/provider/$logProviderng/provider/$parseProviderng/provider/$rootScopeProviderng/provider/$sceDelegateProviderng/provider/$sceProviderng/serviceng/service/$anchorScrollng/service/$animateng/service/$cacheFactoryng/service/$compileng/service/$controllerng/service/$documentng/service/$exceptionHandlerng/service/$filterng/service/$httpng/service/$httpBackendng/service/$interpolateng/service/$intervalng/service/$localeng/service/$locationng/service/$logng/service/$parseng/service/$qng/service/$rootElementng/service/$rootScopeng/service/$sceng/service/$sceDelegateng/service/$templateCacheng/service/$timeoutng/service/$windowng/typeng/type/$cacheFactory.Cacheng/type/$compile.directive.Attributesng/type/$rootScope.Scopeng/type/angular.Moduleng/type/form.FormControllerng/type/ngModel.NgModelControllerngAnimatengAnimate/providerngAnimate/provider/$animateProviderngAnimate/servicengAnimate/service/$animatengCookiesngCookies/servicengCookies/service/$cookiesngCookies/service/$cookieStorengMessagesngMessages/directivengMessages/directive/ngMessagengMessages/directive/ngMessagesngMockngMock/functionngMock/function/angular.mock.dumpngMock/function/angular.mock.injectngMock/function/angular.mock.modulengMock/objectngMock/object/angular.mockngMock/providerngMock/provider/$exceptionHandlerProviderngMock/servicengMock/service/$exceptionHandlerngMock/service/$httpBackendngMock/service/$intervalngMock/service/$logngMock/service/$timeoutngMock/typengMock/type/angular.mock.TzDatengMockE2EngMockE2E/servicengMockE2E/service/$httpBackendngResourcengResource/servicengResource/service/$resourcengRoutengRoute/directivengRoute/directive/ngViewngRoute/providerngRoute/provider/$routeProviderngRoute/servicengRoute/service/$routengRoute/service/$routeParamsngSanitizengSanitize/filterngSanitize/filter/linkyngSanitize/servicengSanitize/service/$sanitizengTouchngTouch/directivengTouch/directive/ngClickngTouch/directive/ngSwipeLeftngTouch/directive/ngSwipeRightngTouch/servicengTouch/service/$swipe
文字

AngularJS: API: ng/directive/ngClass

ngClass

  1. - directive in module ng

ngClass指令允许你动态设置HTML元素的CSS类,通过绑定到一个包含要添加的所有类的表达式。

这个指令有三种使用方式,这三种方式取决于表达式计算结果:

  1. 如果表达式结果为字符串,则字符串为使用空格分隔的一个或多个类名。

  2. 如果表达式结果为一个数组,则数组中每个元素为使用空格分隔的一个或多个类名字符串。

  3. 如果表达式结果为一个对象,对象中的每个key-value中如果键值为真时则键名作为类名。

这个指令不会添加重复的类,如果这个类已经存在的话。

当表达式改变时,以前添加的类会被移除,并且只会添加之后新产生的类。

指令信息

  • 这个指令执行优先级为0.

用法

  • 作为属性使用:
    <ANY
      ng-class="">
    ...
    </ANY>
  • 作为CSS类使用:
    <ANY class="ng-class: ;"> ... </ANY>

动画

add - 在类被应用到元素前发生

remove - 在类从元素移除前发生

点击这里 了解更多关于涉及动画的步骤。

参数

参数 类型 详述
ngClass expression

用于计算的表达式。 计算结果可以为使用空格分隔的类名字符串、数组,或布尔值的类名映射(map)表。如果是映射表,那些值为真的属性名称将作为css类添加到元素上。

示例

下面演示使用ngClass指令的一些基本绑定用法。

index.html
<p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
<input Type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
<input Type="checkbox" ng-model="important"> important (apply "bold" class)<br>
<input Type="checkbox" ng-model="error"> error (apply "red" class)<hr>
<p ng-class="style">Using String Syntax</p>
<input Type="text" ng-model="style" placeholder="Type: bold strike red"><hr>
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<input ng-model="style1" placeholder="Type: bold, strike or red"><br>
<input ng-model="style2" placeholder="Type: bold, strike or red"><br>
<input ng-model="style3" placeholder="Type: bold, strike or red"><br>
style.css
.strike {
  text-decoration: line-through;}.bold {
    font-weight: bold;}.red {
    color: red;}
protractor.js
var ps = element.all(by.css('p'));

it('should let you toggle the class', Function() {

  expect(ps.first().getAttribute('class')).not.toMatch(/bold/);
  expect(ps.first().getAttribute('class')).not.toMatch(/red/);

  element(by.model('important')).click();
  expect(ps.first().getAttribute('class')).toMatch(/bold/);

  element(by.model('error')).click();
  expect(ps.first().getAttribute('class')).toMatch(/red/);});

it('should let you toggle string example', Function() {
  expect(ps.get(1).getAttribute('class')).toBe('');
  element(by.model('style')).clear();
  element(by.model('style')).sendKeys('red');
  expect(ps.get(1).getAttribute('class')).toBe('red');});

it('array example should have 3 classes', Function() {
  expect(ps.last().getAttribute('class')).toBe('');
  element(by.model('style1')).sendKeys('bold');
  element(by.model('style2')).sendKeys('strike');
  element(by.model('style3')).sendKeys('red');
  expect(ps.last().getAttribute('class')).toBe('bold strike red');});

动画

下面的例子演示使用ngClass来操作动画。

index.html
<input id="setbtn" Type="button" value="set" ng-click="myVar='my-class'">
<input id="clearbtn" Type="button" value="clear" ng-click="myVar=''"><br>
<span class="base-class" ng-class="myVar">Sample Text</span>
style.css
.base-class {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;}

.base-class.my-class {
  color: red;
  font-size:3em;}
protractor.js
it('should check ng-class', Function() {
  expect(element(by.css('.base-class')).getAttribute('class')).not.
    toMatch(/my-class/);

  element(by.id('setbtn')).click();

  expect(element(by.css('.base-class')).getAttribute('class')).
    toMatch(/my-class/);

  element(by.id('clearbtn')).click();

  expect(element(by.css('.base-class')).getAttribute('class')).not.
    toMatch(/my-class/);});

ngClass 和 已经存在的 CSS3 Transitions/Animations

ngClass指令仍然支持CSS3 Transitions/Animations 事件上,如果它们不遵从ngAnimate CSS 命名结构的话。在动画阶段,ngAnimate将用于辅助CSS类来跟踪动画的开始和结束。但这并不妨碍任何元素上已经存在的CSS转换。要想了解基于类的动画过程中发生了什么,可参见 $animate.addClass 和 $animate.removeClass。


上一篇:下一篇: