AngularJS中选择样式

简介:

代码下载:https://files.cnblogs.com/files/xiandedanteng/angularJSSelectClass.rar

要点,{{ctrl.name}}比<span ng-bind="ctrl.name"></span>要更加灵活,下例中他将作为css选择器使用。

代码:

复制代码
<!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>
    .lightgreen{
        color:lightgreen;
    }
    .green{
        color:green;
    }
    .yellow{
        color:yellow;
    }
  </style>
    <meta charset="gbk">
    <script src="angular1.4.6.min.js"></script>
 </head>

 <body ng-controller="MainCtrl as ctrl"> 
    <p>Hi,I am <span class="{{ctrl.user.name}}">Andy Liu</span> from China</p>
    <p>Hi,I am <span class="{{ctrl.user.name1}}">Andy Liu</span> from China</p>
    <p>Hi,I am <span class="{{ctrl.user.name2}}">Andy Liu</span> from China</p>
 </body>
</html>
<script type="text/javascript">
<!--
    angular.module('notesApp',[])
     .controller('MainCtrl',[function(){
       var self=this;

       self.user={name:"lightgreen",name1:"green",name2:"yellow"};
     }]);
//-->
</script>
复制代码

效果:












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


相关文章
|
10月前
|
前端开发 JavaScript 测试技术
angularjs初识
angularjs初识
53 0
|
数据格式 JSON JavaScript
|
Web App开发 前端开发 JavaScript
|
JavaScript 前端开发
|
数据安全/隐私保护
|
JavaScript 前端开发 开发者
|
Web App开发 JavaScript 前端开发