3、AngularJs的双向数据绑定

刺骨的言语ヽ痛彻心扉 2022-08-23 08:17 192阅读 0赞

1、AngularJs的指令系统

• ng\-app

• ng\-controller

2、AngularJs的双向数据绑定

• MVVM

• $timeout

• ng\-click     (类似于点击事件)

• ng\-model  (绑定一个Model的数据)

3、双向数据绑定

3.1 双向数据绑定,M影响V

<!DOCTYPE html>
    <html ng-app>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>双向数据绑定</title>
    		<script type="text/javascript" src="../js/angular.min.js"></script>
    		<script type="text/javascript">
    			function Aaa($scope, $timeout) {
    				$scope.age = 10;
    				/*1、利用定时器*/
    				/*$timeout(function() {
    					$scope.age = 5;
    				}, 2000);*/
    				/*2、利用点击事件*/
    				$scope.show = function() {
    					$scope.age = 5;
    				}
    			}
    		</script>
    	</head>
    
    	<body>
    		<div ng-controller="Aaa" ng-click="show()">
    			{
       {age}}
    		</div>
    
    	</body>
    
    </html>

3.2  双向数据绑定,V影响M

<!DOCTYPE html>
    <html ng-app>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>双向数据绑定</title>
    		<script type="text/javascript" src="../js/angular.min.js"></script>
    		<script type="text/javascript">
    			function Aaa($scope, $timeout) {
    				$scope.name = 'zhang';
    			}
    		</script>
    	</head>
    
    	<body>
    		<div ng-controller="Aaa">
    			<input type="text" ng-model="name" />
    			<p>{
       {name}}</p>
    		</div>
    
    	</body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3数据双向绑定

Vue.js 的双向数据绑定是通过使用 `v-model` 指令实现的。在 Vue 中，可以使用 `v-model` 指令在表单元素上创建双向数据绑定。它实际上是一个语法糖

小灰灰/ 2024年03月27日 12:56/ 0 赞/ 83 阅读

相关【angularjs】数据绑定

文章目录基础：数据绑定：总结：因为公司的需要，开始学习angularjs。准备： webform开发工具。 anguljs

忘是亡心i/ 2024年02月19日 16:10/ 0 赞/ 83 阅读

相关 VUE3.0——双向数据绑定

reactive <template> <view class="index"> <view @click="change

谁借莪１个温暖的怀抱￠/ 2022年11月30日 12:27/ 0 赞/ 196 阅读

相关 AngularJS第二课：双向数据绑定

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 一.什么是双向数据绑定首先介绍作用域，相当于一个

﹏ヽ暗。殇╰゛Y/ 2022年10月02日 02:50/ 0 赞/ 235 阅读

相关 vue3 数据双向绑定demo

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6ams5LyY5pmo_size_20_col

朴灿烈づ我的快乐病毒、/ 2022年09月16日 04:55/ 0 赞/ 192 阅读

相关 3、AngularJs的双向数据绑定

1、AngularJs的指令系统 • ng\-app • ng\-controller 2、AngularJs的双向数据绑定

刺骨的言语ヽ痛彻心扉/ 2022年08月23日 08:17/ 0 赞/ 193 阅读

相关 AngularJS（2）——AngularJS数据双向绑定

双向绑定 AngularJS在$scope变量中使用脏值检测来实现了数据双向绑定。 Scope作用： 1.通过数据共享连接Controller和View

妖狐艹你老母/ 2022年08月22日 00:18/ 0 赞/ 198 阅读

相关 AngularJs数据绑定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

朴灿烈づ我的快乐病毒、/ 2022年07月12日 07:09/ 0 赞/ 199 阅读

相关 Bootstrap + AngularJS 双向数据绑定Form表单测试

近期项目需要实现更好的前后端分离，所以用到了AngularJS,AngularJS是一个开源的JavaScript框架，它具有四大核心特性：模块化和依赖注入，MVC分层，指令

一时失言乱红尘/ 2022年06月12日 15:00/ 0 赞/ 257 阅读

相关 angularJS(三)angularJsDemo之双向绑定

需求：文本框输入什么后面显示什么 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

红太狼/ 2022年02月23日 00:28/ 0 赞/ 273 阅读