AngularJS 05（事件绑定）

事件绑定
文本变化、鼠标点击、鼠标移动

ng-change
文本变化
ng-change必须配合ng-model才能使用

<div ng-controller="changeCtrl">
<label id="lbl" class="label label-info"></label>
<input ng-model="msg" ng-change="changeFunc(msg)" type="text" class="form-control" />
</div>
<script>
        function changeCtrl($scope){
            $scope.changeFunc=function(msg){
                var msg=msg.replace("abc","你好");
                $("#lbl").html(msg);
            };
        }
</script>

ng-click、ng-dblclick
$event.target获取的是DOM元素如果想要操作元素需要转换成jQuery对象进行操作

<div ng-controller="bookCtrl">
    <ul>
        <li class="list-group-item" ng-repeat="b in books">
            <span class="glyphicon glyphicon-bookmark"></span>
            <span data-price="{{b.Price}}" ng-dblclick="showpriceFunc($event.target)">{{b.Title}}</span>
            <span data-id="{{b.Id}}" ng-click="hideFunc($event.target)" style="cursor:pointer ;" class="pull-right glyphicon glyphicon-remove"></span>
        </li>
    </ul>
</div>
<script>
        function bookCtrl($scope,$http){
            $http.get("json/books.json")
            .success(function(r){
                $scope.books=r;
            });
            $scope.hideFunc=function(t){
                alert("删除编号为【"+$(t).attr("data-id")+"】的图书");
                $(t).parent().hide(1000);
            };
            $scope.showpriceFunc=function(p){
                alert($(p).attr("data-price"));
            }

        }
</script>

ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup

$even.tartget

angularJS正则校验综合案例

<form id="formLogin" name="formLogin" action="ngForm.html">
                <!--form-control-feedback将span图标显示在input输入框内部-->
                <div class="form-group has-feedback" data-ng-class="formLogin.userName.$dirty?(formLogin.userName.$valid?'has-success':'has-error'):''">
                    <label class="control-label" for="userName">UserName</label>
                    <input required type="text" name="userName" id="userName" class="form-control"  data-ng-model="userName" data-ng-minlength="3" data-ng-maxlength="6"/>
                    <span data-ng-show="formLogin.userName.$dirty && formLogin.userName.$valid" data-ng-class="'glyphicon-ok'" class="glyphicon form-control-feedback"></span>
                    <span data-ng-show="formLogin.userName.$dirty && formLogin.userName.$invalid" data-ng-class="'glyphicon-remove'" class="glyphicon form-control-feedback"></span>

                </div>
                <div class="form-group has-feedback" data-ng-class="formLogin.email.$dirty?(formLogin.email.$valid?'has-success':'has-error'):''">
                    <label class="control-label" for="email">email</label>
                    <input required type="email" name="email" id="email" class="form-control" data-ng-model="email" />
                    <span ng-show="formLogin.email.$dirty && formLogin.email.$valid" ng-class="'glyphicon-ok'" class="glyphicon form-control-feedback"></span>
                    <span ng-show="formLogin.email.$dirty && formLogin.email.$invalid" ng-class="'glyphicon-remove'" class="glyphicon form-control-feedback"></span>

                </div>
                <p class="text-right">
                    <button type="submit" class="btn btn-primary">Login</button>
                </p>
</form>

只要写在ng-app中ng-model=”“绑定的变量就算ng-init和控制器中没有声明，也可以使用。