angularjs通过ng-change和watch两种方式实现对表单输入改变的监控

直接上练习代码

<!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>

转载于:https://www.cnblogs.com/xiaoXuZhi/p/angularjs-ngChange-watch.html

angularjs通过ng-change和watch两种方式实现对表单输入改变的监控相关推荐

两种方式构建vue单页面多组件应用
方法一.使用vue的v-if指令该指令可以根据表达式的值实现html的元素或者vue的template模板切换,实现dom渲染,从而实现据绑定 / 组件被销毁并重建.借助该指令,实现多组件之间的切换 ...
uni-app.02.提交form表单的两种方式
提交form表单的两种方式 uni-app提交form表单的两种方式 form表单元素较少前端代码举例后端代码举例 form表单元素较多前端代码举例: 后端java代码举例 uni-app提交f ...
hive建立内部表映射hbase_Hive 建外链表到 Hbase（分内部表、外部表两种方式）
一. Hive 建内部表,链到hbase :特点:Hive drop表后,Hbase 表同步删除 drop table if exists hbase_kimbo_test1; CREATE TABL ...
mysql不停止重启服务器_不停止MySQL服务增加从库的两种方式
现在生产环境MySQL数据库是一主一从,由于业务量访问不断增大,故再增加一台从库.前提是不能影响线上业务使用,也就是说不能重启MySQL服务,为了避免出现其他情况,选择在网站访问量低峰期时间段操作. ...
mysql增加从库_不停止MySQL服务增加从库的两种方式 (装载)
现在生产环境MySQL数据库是一主一从,由于业务量访问不断增大,故再增加一台从库.前提是不能影响线上业务使用,也就是说不能重启MySQL服务,为了避免出现其他情况,选择在网站访问量低峰期时间段操作. ...
java两种绑定方式_Javascript绑定事件的两种方式的区别
命名函数 function check(){ //code } 匿名函数 window.onload = function(){ //先获取元素对象,再绑定事件,绑定的是匿名函数不可重用 var bt ...
ASP.NET Web API接受AngualrJS的QueryString的两种方式
ASP.NET Web API如何接受来自AngualrJS的QueryString呢?本篇体验两种方式. 第一种方式:http://localhost:49705/api/products?sear ...
mysql 停从库_不停止 MySQL 服务增加从库的两种方式
现在生产环境MySQL数据库是一主一从,由于业务量访问不断增大,故再增加一台从库.前提是不能影响线上业务使用,也就是说不能重启MySQL服务,为了避免出现其他情况,选择在网站访问量低峰期时间段操作. ...
不停止MySQL服务增加从库的两种方式
本文出自51CTO博客博主李振良的技术博客,如有任何问题请进入博主页面互动讨论. 博文地址:http://lizhenliang.blog.51cto.com/7876557/1669829 现在生产 ...

angularjs通过ng-change和watch两种方式实现对表单输入改变的监控

angularjs通过ng-change和watch两种方式实现对表单输入改变的监控相关推荐

最新文章

热门文章