首页 > 代码库 > angularjs1-5，class，

angularjs1-5，class，

2024-11-04 07:51:39   204人阅读

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="angular.min.js"></script>
        <style>
            .red{ background:red; color:blue;}
            .yellow{ background:yellow;}
        </style>
    </head>
    <body>
      <div ng-app="myApp">
          <div ng-controller="firstController">
               <div ng-cloak  ng-class="{red:s}">{{text}}</div>
               <div ng-cloak  ng-class="{{sClass}}">{{text}}</div>
              <div ng-cloak  ng-style="{color:‘red‘}">{{text}}</div>
              <div ng-cloak  ng-style="{{style}}">{{text}}</div>
              <a href="{{url}}">百度1</a>
              <a ng-href="{{url}}">百度</a>
              <img src="{{src}}" />
              <img ng-src="{{src}}" />
                <br>
              <br>
              <a ng-href="{{url}}" ng-attr-title="{{text}}">百度</a>
              <br>
              <br>
              <div ng-show="s">你好</div> //dispaly显示隐藏
              <br>
              <br>
              <div ng-if="s">你好</div> //dom的移除和没有移除
              <div ng-switch on="s">
                  <p ng-switch-default>默认的效果</p>
                  <p ng-switch-when="false">false切换的效果</p>
                  <p ng-switch-when="true">true切换的效果</p>
              </div>
              <br>
              <br>
              <div class="animate-switch-container"
                   ng-switch on="selection">
                  <div class="animate-switch" ng-switch-when="settings">Settings Div</div>
                  <div class="animate-switch" ng-switch-when="home">Home Span</div>
                  <div class="animate-switch" ng-switch-default>default</div>
              </div>
              <input type="checkbox" ng-model="open"><br/>
              <details id="details" ng-open="open">
                  <summary>Copyright 2011.</summary>
                  <p>All pages and graphics on this web site are the property of W3School.</p>
              </details>
          </div>
      </div>
      <script type="text/javascript">
          var app = angular.module("myApp", []);
          app.controller(‘firstController‘,function($scope){
              $scope.text=‘phonegap中文网‘;
              $scope.s=true;
              $scope.sClass = "{red:true,yellow:true}";
              $scope.style = "{color:‘red‘,background:‘yellow‘}";
              $scope.url=‘http://www.baidu.com‘;
              $scope.src=‘http://www.baidu.com/img/bdlogo.png‘;
//              $scope.style = "{color:‘red‘,background:‘yellow‘}";
//              $scope.sClass = "{red:true,yellow:true}";
//              $scope.url = "http://www.baidu.com";
              $scope.items = [‘settings‘, ‘home‘, ‘other‘];
              $scope.selection = $scope.items[0];
          });
      </script>
    </body>
</html>

 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="angular.min.js"></script>
        <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.4.0-beta.6/angular-sanitize.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
          <div ng-controller="firstController">
              <div ng-click="run()">点击</div>
              <div ng-bind="text"></div>
              //绑定多个
              <div ng-bind-template="{{text}} {{name}}"></div>
              //1.引入angular-sanitize，2.依赖[‘ngSanitize‘]
              <div ng-bind-html="text2"></div>
          </div>
      </div>
      <script type="text/javascript">
          var app = angular.module("myApp", [‘ngSanitize‘]);
          app.controller(‘firstController‘,function($scope){
                $scope.text=‘phonegap中文网‘;
                $scope.name=‘中文网‘;
                $scope.text2=‘<h2>这是h2</h2>‘;
                $scope.run=function(){
                  alert(‘run‘);
                  console.log(‘run‘);
                }
          });
      </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript" src="../angular.min.js"></script>
        <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.4.0-beta.6/angular-sanitize.min.js"></script>
    </head>
    <body>
      <div ng-app="myApp">
          <div ng-controller="firstController">
              <div ng-repeat="innerList in list" ng-init="outerIndex = $index">
                  <div ng-repeat="value in innerList" ng-init="innerIndex = $index">
                      <span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>
                  </div>
              </div>
              <input type="text" ng-model="name" ng-model-options="{ updateOn: ‘blur‘ }" />
              {{name}}
          </div>
      </div>
      <script type="text/javascript">
          var app = angular.module("myApp", [‘ngSanitize‘]);
          app.controller(‘firstController‘,function($scope){
               $scope.list = [[‘a‘, ‘b‘], [‘c‘, ‘d‘]];
          });
      </script>
    </body>
</html>

 

angularjs1-5，class，


联系
我们