zoukankan      html  css  js  c++  java
  • angularjs教程——样式相关指令详解

    一、ng-class

    <!DOCTYPE HTML>
    <html ng-app='myApp'>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="angular.min.js"></script>
    <style type="text/css">
    .red{ background:red;}
    .yellow{ color:yellow;}
    </style>
    <script>
    var m1=angular.module('myApp',[]);
    
    m1.controller('Aaa',['$scope',function($scope){
      $scope.text='hellow';
      
    }]);
    
    </script>
    <title>无标题文档</title>
    </head>
    
    <body>
    <div ng-controller="Aaa">
      <div ng-class="{red:true,yellow:true}">{{text}}</div>
    </div>
    </body>
    </html>

    二、ng-style

    <!DOCTYPE HTML>
    <html ng-app='myApp'>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="angular.min.js"></script>
    <style type="text/css">
    .red{ background:red;}
    .yellow{ color:yellow;}
    </style>
    <script>
    var m1=angular.module('myApp',[]);
    
    m1.controller('Aaa',['$scope',function($scope){
      $scope.text='hellow';
      
    }]);
    
    </script>
    <title>无标题文档</title>
    </head>
    
    <body>
    <div ng-controller="Aaa">
      <div ng-style="{background:'red',color:'yellow'}">{{text}}</div>
    </div>
    </body>
    </html>
    View Code
    <!DOCTYPE HTML>
    <html ng-app='myApp'>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="angular.min.js"></script>
    <style type="text/css">
    .red{ background:red;}
    .yellow{ color:yellow;}
    </style>
    <script>
    var m1=angular.module('myApp',[]);
    
    m1.controller('Aaa',['$scope',function($scope){
      $scope.text='hellow';
      $scope.style="{background:'red',color:'yellow'}"
      
    }]);
    
    </script>
    <title>无标题文档</title>
    </head>
    
    <body>
    <div ng-controller="Aaa">
      <div ng-style="{{style}}">{{text}}</div>
    </div>
    </body>
    </html>
    View Code

    三、ng-href、ng-src、ng-attr-(suffix)

  • 相关阅读:
    5种类型的程序猿
    cocos2dx 关于lua 绑定的环境配置官方文档翻译与 将自己定义c++方法绑定到lua的的方法
    智能聊天机器人实现(源代码+解析)
    storm trident merger
    分析Redis架构设计
    Spring+Struts+Hibernate 简介(转)
    java面试题(开发框架)
    Jsp+Servlet+JavaBean经典MVC模式理解
    Loadrunner中影响"响应时间"的设置
    phpredis中文手册——《redis中文手册》 php版(转)
  • 原文地址:https://www.cnblogs.com/cacti/p/5953428.html
Copyright © 2011-2022 走看看