angularjs通過ng-change和watch兩種方式實現對表單輸入改變的監控

本文轉載自查看原文 2018-08-29 12:18 1623 ng-change/ watch/ angularjs

直接上練習代碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body ng-app="myApp" ng-controller="myContro">
    <div>
        <h1>ng-change指令</h1>
        ng-change指令，當表單輸入發生改變時，會觸發該事件<br />
        <div>
            姓名：<input type="text" id="name1" ng-model="user.name"
                placeholder="請輸入姓名" ng-change="inputChange()" />
        </div>
        <div>
            年齡：<input type="number" ng-model="user.age"
                placeholder="請輸入年齡" ng-change="inputChange()" />
        </div>
        <div>{{user.message}}</div>
    </div>
    <div>
        <h1>通過監聽改變達到和ng-chang一樣的效果</h1>
        <div>
            姓名：<input type="text" id="name2" ng-model="user2.name"
                placeholder="請輸入姓名" />
        </div>
        <div>
            年齡：<input type="number" ng-model="user2.age"
                placeholder="請輸入年齡" />
        </div>
        <div>{{user2.message}}</div>
    </div>
</body>
</html>
<script src="../JS/angular.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("myContro", function ($scope, $interpolate) {
        $scope.user = {
            name: "",
            age: "",
            message: ""
        };

        $scope.user2 = {
            name: "",
            age: "",
            message: ""
        };

        $scope.messageTemp = "{{name}},您好,您今年{{age}}歲啦！";
        var template = $interpolate($scope.messageTemp);
        $scope.inputChange = function () {
            $scope.user.message = template({ name: $scope.user.name, age: $scope.user.age });
        };

        //// 下面通過watch監聽實現ng-change一樣的效果
        $scope.$watch("user2.name", function (newValue, oldValue) {
            $scope.getMessage(newValue, oldValue);
        });

        $scope.$watch("user2.age", function (newValue, oldValue) {
            $scope.getMessage(newValue, oldValue);
        });

        $scope.getMessage = function (value1, value2) {
            if (value1 != value2) {
                $scope.user2.message = template({ name: $scope.user2.name, age: $scope.user2.age });
            }
        }
    });
</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 angularJS中ng-change的用法 AngularJs ng-change事件/指令(轉) angularjs中ng-change使用方法 input 輸入框兩種改變事件的方式 angular中的 ng-change flask表單提交的兩種方式 angular input=file ng-change事件表單提交的兩種方式區別在angular中實現下拉框的兩種方式 ng-repeat和 ng-option js方式清空表單數據的兩種方式