AngularJS入门-数据绑定

喜欢ヅ旅行 2022-09-24 07:24 226阅读 0赞

**AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。**

**ng-app 指令初始化一个 AngularJS 应用程序。**

**ng-init 指令初始化应用程序数据。**

**ng-model 指令把元素值（比如输入域的值）绑定到应用程序。**

初始化名为myAPP应用程序，定义控制器为formCtrl  
<div ng-app="myApp" ng-controller="formCtrl">  
  <form novalidate>

First Name:<br>  
    <input type="text" ng-model="user.firstName"><br>

Last Name:<br>  
    <input type="text" ng-model="user.lastName">  
    <br><br>  
    <button ng-click="reset()">RESET</button>  
  </form>  
  <p>form = \{ \{user \}\}</p>  
  <p>master = \{ \{master\}\}</p>  
</div>  
  
  
<script>  
var app = angular.module('myApp', \[\]);  
app.controller('formCtrl', function($scope) \{

$scope.master = \{firstName:"John", lastName:"Doe"\};  
    $scope.reset = function() \{

$scope.user = angular.copy($scope.master);  
    \};  
    $scope.reset();  
\});  
</script>

效果图，如下图所示.再输入框输入数据，from的数据会随之改变。点击reset按钮，则可以直接跳转到

$scope.reset = function() \{   $scope.user = angular.copy($scope.master);\};代码段。

标紫色的代码，如果不写，则不会执行reset()的代码，所以一定要写！

![Image 1][]

[Image 1]:

发表评论取消回复

表情：

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

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

相关阅读

相关【angularjs】数据绑定

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

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

相关 AngularJs 页面数据绑定设置默认值

在AngularJS中，对页面进行数据绑定，有两种方法： 1、表达式：`{ {param}}` 2、`ng-bind: ng-bind="param"` 1、遇到的问

￡神魔★判官ぃ/ 2023年06月25日 02:19/ 0 赞/ 19 阅读

相关 android数据绑定,Android数据绑定DataBinding（一）入门篇

![66b52468c121889b900d4956032f1009.png][] 8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？早上看

红太狼/ 2022年10月14日 00:47/ 0 赞/ 248 阅读

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

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

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

相关 AngularJS入门-数据绑定

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。 ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据

喜欢ヅ旅行/ 2022年09月24日 07:24/ 0 赞/ 227 阅读

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

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

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

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

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

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

相关 AngularJs轻松入门（二）数据绑定

数据绑定是AngularJs中非常重要的特性，我们看一下下面的例子： <!DOCTYPE html> <html ng-app> <head lang="en"> <

Love The Way You Lie/ 2022年08月08日 03:29/ 0 赞/ 245 阅读

相关 AngularJs数据绑定原理

注这篇博文主要是写给新手的，是给那些刚刚开始接触Angular，并且想了解数据帮定是如何工作的人。如果你已经对Angular比较了解了，那强烈建议你直接去阅读源代码。

素颜马尾好姑娘i/ 2022年07月29日 09:19/ 0 赞/ 193 阅读

相关 AngularJs数据绑定

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

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