码迷,mamicode.com
首页 > Web开发 > 详细

AngularJs练习Demo3

时间:2016-06-22 00:19:57      阅读:150      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!