Angular自动双向绑定值

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div ng-app="myApp" ng-controller="formCtrler">
        <form novalidate>
        Name:<br>
        <input type="text" ng-model="user.Name"><br>
        Email:<br>
        <input type="text" ng-model="user.Email">
        <br>
        <br>
        <button ng-click="reset()">
            RESET</button>
        </form>
        <p>
            form = {{user }}</p>
        <p>
            master = {{master}}</p>
    </div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("formCtrler", function ($scope) {
        $scope.master = { "firstName": ‘123‘, "lastName": ‘456‘ };

        $scope.reset = function () {
            $scope.user = angular.copy($scope.master);
        };
        //注册事件之后调用为model赋值
        $scope.reset();
    });
</script>
</html>
时间: 2024-11-10 13:39:07

Angular自动双向绑定值的相关文章

Angular数据双向绑定

Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 一.什么是数据双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-control

Angular之双向数据绑定

---恢复内容开始--- angular最初进入前端开发人员视野的时候,给人以不可磨灭的印象之一就是它的双向数据绑定的实现.本篇章会先介绍如何使用此功能,然后在深入解释它的双向绑定的机制是如何实现的. angular中的data-binding指的是模型models和视图views之间的自动同步.angular实现双向绑定后,会让你觉得数据模型是页面中数据唯一的真实来源.当model改变后,视图反映改变,反之亦然.通俗的说,所谓的双向数据绑定,无非就是从界面的操作能实时反映到数据,数据的变更能实

使用 v-html 绑定值

<div id="app03"> <div v-html="message"></div> <!--这里使用v-html绑定值--> </div> 调用: StudyVue03("#app03"); 实现: // 使用 v-html 绑定值 function StudyVue03(obj) { new Vue({ el: obj, data: { message: 'This is v-

angular的双向数据绑定

方向1:模型数据(model) 绑定 到视图(view) 实现方法1:{{model变量名}} $scope.num=10 <p>{{num}}</p> 实现方法2: 常用指令(ngRepeat.ngIf.ngShow/Hide/Src....) $scope.list=[{name:'sam',age:22},{name:'tom',age:37},{name:'kim',age:28}] <tr ng-repeat='std in list'> <td>

Angular之双向数据绑定(下)

本篇详细介绍:1.angular时如何通过脏检查来实现对$scope对象上变量的双向绑定的.2.实现angular双向绑定的三个重要方法:$digest(),$apply(),$watch(). angular不像Ember.js,通过动态设置setter函数和getter函数来实现双向绑定,脏检查允许angular监听可能存在可能不存在的变量. $scope.$watch语法糖:$scope.$watch(watchExp,Listener,objectEquality); 监听一个变量何时变

angular.js双向数据绑定实现动画特效

一.HTML 1.引入必要的js文件,这个不多说了(注意由于之后要使用angular提供的动画效果和路由效果,所以要引入angular-animate.js和angular-route.js两个文件) 2.body内加入以下代码:  <div class="page {{pageClass}}" ng-view></div> ng-view不多说,class通过双向绑定的方式,通过controller动态控制class中的{{pageclass}} 另外不要忘了

Angular数据双向绑定机制

数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="CounterCtrl"> <span ng-bind="counter"></span> <button ng-click="counter=counter+1">increase</butto

Angular JS - 3 - Angular JS 双向数据绑定

一 .数据绑定 1. 数据绑定: 数据从一个地方A转移(传递)到另一个地方B, 而且这个操作由框架来完成2. 双向数据绑定: 数据可以从View(视图层)流向Model(模型,也就是数据), 也可以从Model流向View 视图(View): 也就是我们的页面(主要是Andular指令和表达式) 模型(Model) : 作用域对象(当前为$rootScope), 它可以包含一些属性或方法 当改变View中的数据, Model对象的对应属性也会随之改变: ng-model指令 数据从View==>

angular 数据双向绑定的终极奥义

1.ng-app: 是ng的入口,表示当前元素的所有指令都会被angular管理,让anguar认识这段代码,告诉angular要去管理下面的代码:同时angular执行这段代码的时候会在内部开辟一块空间来存储这个页面用到的数据模型. 2.ng-init: angular执行这个指令的时候,首先会在开辟的空间里面找有没有name这个数据模型,如果没有会主动创建一个数据模型,同时会给该数据模型赋值. 3.ng-model: angular执行这个指令的时候,首先会在创建的空间里面找name数据模型