20-service之$watch

来源：互联网发布：centos7修改远程端口编辑：程序博客网时间：2024/05/21 09:15
<!-- $watch：持续监听数据上的变化，更新界面 --><!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <script src="js/angular.js"></script>    </head>    <body>        <div ng-app="myApp" ng-controller="myCtrl">           <b>请输入姓名：</b><br>           <b>姓：</b><input type="text" ng-model="lastName"><br>           <b>名：</b><input type="text" ng-model="firstName"><br>           <h1>{{ lastName + " " + firstName }}</h1>           <h2>{{ getFullName() }}</h2>           <h2 style='color:red'>{{ fullName }}</h2>        </div>    </body>    <script>        var app = angular.module('myApp', []);        app.controller('myCtrl', function($scope) {            $scope.lastName = "";            $scope.firstName = "";            $scope.getFullName =function(){              return $scope.lastName + " " + $scope.firstName;            }            //监听lastName的变化，更新fullName            $scope.$watch('lastName', function() {                $scope.fullName = $scope.lastName + " " + $scope.firstName;            });            //监听firstName的变化，更新fullName            $scope.$watch('firstName', function() {                $scope.fullName = $scope.lastName + " " + $scope.firstName;            });       });</script></html>
阅读全文
0 0