首页 > Web开发 > 详细

AngularJs练习Demo3

时间:2016-06-22 00:16:40      阅读:294      评论:0      收藏:0      [点我收藏+]
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AngularJS事件指令</title>
    <script type="text/javascript" src="~/Scripts/angular.js"></script>
</head>
<body>
    <h1>AngularJS事件指令</h1>
    <div ng-app="myApp">
        <div ng-controller="firstController">
            <div ng-click="run()">点击</div>

            <input type="checkbox" ng-model="sel" />
            <select>
                <option>111</option>
                <option ng-selected="sel">222</option>
            </select>

            <p>
                <input type="checkbox" ng-change="change()" ng-model="c" />
            </p>

            <p>
                <input type="text" value="你好" ng-copy="aaa=‘按下复制键的时候执行的事件‘" />{{aaa}}
            </p>
            <p>
                <input type="text" value="你好" ng-cut="bbb=‘按下剪切键的时候执行的事件‘" />{{bbb}}
            </p>
            <p>
                <input type="text" value="你好" ng-paste="ccc=‘按下粘贴键的时候执行的事件‘" />{{ccc}}
            </p>

            <p>
                <div ng-bind="text"></div>

                <div ng-cloak></div>
                {{text}}
                <div ng-non-bindable>
                    {{text}} @*n {{text}}就会原样输出*@
                </div>
            </p>


        </div>
    </div>
    <script type="text/javascript">
        //ng-bind 和ng-cloak 都是为了防止页面闪烁

        var app = angular.module("myApp", []);
        app.controller("firstController", function ($scope) {
            $scope.text = "PhoneGap中文网";
            $scope.run = function () {
                alert("On-Click");
            },
            $scope.change = function () {
                if ($scope.c) {
                    alert("改变");
                } else {
                    alert($scope.c);
                }

            }
        });
    </script>
</body>
</html>

  

AngularJs练习Demo3

原文:http://www.cnblogs.com/sumg/p/5605341.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!