AngularJS的ng-class示例

简介:

 程序下载:https://files.cnblogs.com/files/xiandedanteng/angularJSRender.rar

代码:

复制代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="notesApp">
 <head>
  <title> New Document </title>
  <style>
    .odd{
        background-color:blue;
        width:300px;
    }
    .even{
        background-color:pink;
        width:300px;
    }
  </style>
    <meta charset="utf-8">
    <script src="angular1.4.6.min.js"></script>
 </head>

 <body ng-controller="MainCtrl as ctrl"> 
    <div ng-repeat="member in ctrl.members" ng-class="ctrl.getBackground(member.gender)">
        {{member.id}}.name={{member.name}},age={{member.age}}
    <div>
 </body>
</html>
<script type="text/javascript">
<!--
    angular.module('notesApp',[])
     .controller('MainCtrl',[function(){
       var self=this;
       self.members=[
        {id:1,name:'andy',age:20,gender:'male'},
        {id:2,name:'bill',age:21,gender:'female'},
        {id:3,name:'cindy',age:22,gender:'female'},
        {id:4,name:'douglas',age:23,gender:'female'},
        {id:5,name:'einstein',age:24,gender:'male'},
       ];
       
       self.getBackground=function(gender){
            if(gender=='male'){
                return 'odd';
            }else{
                return 'even';
            }
       };
       
     }]);
//-->
</script>
复制代码

效果:

要点:

ng-class指令用于选择性从html元素中添加或者删除css class












本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/xiandedanteng/p/7413967.html,如需转载请自行联系原作者



相关文章
|
JSON 数据格式 索引
Angular 里使用嵌套 Form 的步骤
Angular 里使用嵌套 Form 的步骤
|
2月前
|
容器
angular之ng-template
angular之ng-template
|
12月前
|
JavaScript 前端开发
AngularJS ng-if使用方法详解
AngularJS ng-if使用方法详解
176 1
|
12月前
|
JavaScript
AngularJS ng-if使用
AngularJS ng-if使用
|
前端开发 JavaScript
angularJS中ng-class指令的三种实现方式
angularJS中ng-class指令的三种实现方式
95 0
angular8-本地运行ng文档
angular8-本地运行ng文档
100 0
angular8-本地运行ng文档
|
JavaScript
Angular ng-template元素的学习笔记
Angular ng-template元素的学习笔记
141 0
Angular ng-template元素的学习笔记
|
JavaScript
Angular refreshView里Component template函数的执行原理
Angular refreshView里Component template函数的执行原理
132 0
Angular refreshView里Component template函数的执行原理
|
JavaScript 网络架构
2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程
2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程
168 0
2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程