Cordova学习笔记 angular 中一些标签的使用

发布时间:2020-07-26 02:47:10 作者:hello_world007
来源:网络 阅读:511
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
            .red{
                background-color: red;
            }
           .black{
               background-color: black;
           }
    </style>
    <script src="js/angular.js"></script>
    <script type="application/javascript">
        (function(angular) {
            'use strict';
            angular.module('myApp', [])
                    .controller('firstController', function firstController($scope,$sce) {
                        $scope.witchColor = {red:true,black:false};
                        $scope.changeColor = function(){
                            if($scope.witchColor.red){
                                $scope.witchColor.red = false;
                            }else{
                                $scope.witchColor.red = true;
                            }

                            if($scope.witchColor.black){
                                $scope.witchColor.black = false;
                            }else{
                                $scope.witchColor.black = true;
                            }
                        }
                        $scope.teststyle={color:'yellow'};
                        $scope.address= "http://www.baidu.com";
                        $scope.idshow = true;
                        $scope.idshow = false;
                        $scope.mySwitch = 3;
                        $scope.t1 = "test1";
                        $scope.t2 = "test2";
                        $sce.trustAsHtml("<a href='http://benohead.com'>benohead.com</a>");
                        $scope.myhtml1= $sce.trustAsHtml("<a href='http://benohead.com'>benohead.com</a>");//$sce 中的trustAsHtml来信任这个html内容
                    });

        })(window.angular);//主模块

        window.onload = function(){
            var myAppdiv = document.getElementById('myApp22');
            angular.bootstrap(myAppdiv,['myApp']) //动态的绑定主mudule的html作用范围
        }
    </script>
</head>
<body >
<div id="myApp22">
    <div ng-controller="firstController">
            <div ng-class="witchColor">test</div>
        <input type="button" value="changeColor" ng-click="changeColor()"/>
        <div ng->test</div>
        <a ng-href="`address`">www</a>
        <div ng-show="idshow">您</div>
        <div ng-switch on="mySwitch">
            <span ng-switch-default> 0</span>
            <span ng-switch-when="1">1</span>
            <span ng-switch-when="2">2</span>
            <span ng-switch-when="3">3</span>
        </div>
        <div ng-bind-template="`t1``t2`"></div><!--绑定多个-->
        <div ng-bind-html="myhtml1" >1212</div> <!--把这个div中的innerHtml绑定到变量myhtml-->
    </div>
</div>
</body>
</html>


推荐阅读:
  1. Cordova学习笔记 事件的简单使用
  2. Cordova学习笔记 $scope的$watch及$timeout的使用示例

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

switch ng cordova

上一篇:麦子学院 — 产品经理之基础阶段和产品思维

下一篇:Oracle Flex ASM和Flex集群

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》