angularJs中ng-model-options设置数据同步的方法

后台请求任务量很大的时候，可以设置同步的时间和操作，

利用ng-model-options来实现，提高网站性能。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="module" ng-controller="ctrl">
<!--updateOn:blur,鼠标离开时同步更新scope数据-->
<!--debounce:5000,数据输入完成后5秒，同步更新scope数据-->
  <input type="text" ng-model="title" ng-model-options="{updateOn:'default blur',debounce:{default:2000,blur:0}}">
  <!--ng-model-options="{updateOn:'default blur',debounce:{default:2000,blur:0}}
  输入光标离开，立即更新，若不离开，2秒后更新
-->
  {{title}}
</div>
<script>
  var m = angular.module('module', []);
  m.controller('ctrl', ['$scope', function ($scope) {
  }]);
</script>
</body>
</html>

以上这篇angularJs中ng-model-options设置数据同步的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS动态绑定ng-options的ng-model实例代码

    AngularJS动态绑定ng-options的ng-model实例代码

    什么情况下会需要动态绑定 ng-model 呢?若你的数据结构长得像是下面这样: var Classes = [ { "Name" : "温度 " , "Options" : [ "Cold" , "Hot" , "Normal" ]}, { "Name" : "份量 " , "Options" : [ "Big&qu

  • Angular中ng-options下拉数据默认值的设定方法

    Angular中ng-options下拉数据默认值的设定方法

    今天学习了一下Angular中ng-options下拉数据默认值的设定方法,留个笔记 直接上代码 <div class="form-group"> <label class="col-sm-2 control-label">教师</label> <div class="col-sm-10"> <select style="display:block; width:100%; heig

  • 详解使用angularjs的ng-options时如何设置默认值(初始值)

    详解使用angularjs的ng-options时如何设置默认值(初始值)

    这两天我用ng-options过程中遇到的初始值为空白的问题,记得去年就遇到过,怎么解决的忘记了,费了一阵子功夫之后解决了,想记下来,方便遇到同样问题的小伙伴当然还有自己. 1.场景: 就是做一个查询列表的弹窗,其中有一个条件需要用到下拉菜单,数据是用过ajax传递过去的. 2.实现: a.html: <select ng-model="myselect" ng-options="o for o in options"></select> b

  • angularjs select 赋值 ng-options配置方法

    数组方式 数据是数组 $scope.years = [2014, 2015, 2016]; 页面元素 <select ng-model="item" ng-options="item as y for y in years"> </select> 设置默认值 如果需要设置默认的选项,可以先设置一个参数: $scope.item = 2016; $scope.years = [2014, 2015, 2016]; 对象数组方式 数据是对象数组

  • AngularJS学习笔记之ng-options指令

    1.基本下拉效果(lable for value in array) 其中select标签中的ng-model属性必须有,其值为选中的对象或属性值. <div ng-controller="ngselect"> <p>usage:label for value in array</p> <p>选项,{{selected}}</p> <select ng-model="selected" ng-opti

  • AngularJS中ng-options实现下拉列表的数据绑定方法

    下拉列表的简单使用 ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值: 另一个是ng-options用于确定下拉列表的元素数组. <select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select> 上面这条语句就是把选择

  • AngularJS基础 ng-model-options 指令简单示例

    AngularJS ng-model-options 指令 AngularJS 实例 在失去焦点时绑定输入框的值到 scope 变量中: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></scrip

  • angular指令笔记ng-options的使用方法

    angular指令笔记ng-options的使用方法

    1.ng-options指令用途: 在表达式中使用数组或对象来自动生成一个select中的option列表.ng-options与ng-repeat很相似,很多时候可以用ng-repeat来代替ng-options.但是ng-options提供了一些好处,例如减少内存提高速度,以及提供选择框的选项来让用户选择.当select中一个选项被选择,该选项将会使用ng-model自动绑定到对应数据上.如果你想设一个默认值,可以像这样:$scope.selected = $scope.collection

  • angularJs中ng-model-options设置数据同步的方法

    后台请求任务量很大的时候,可以设置同步的时间和操作, 利用ng-model-options来实现,提高网站性能. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> </head> <body> <

  • 基于MVC5中的Model层开发数据注解

    ASP.NET MVC5中Model层开发,使用的数据注解有三个作用: 数据映射(把Model层的类用EntityFramework映射成对应的表) 数据验证(在服务器端和客户端验证数据的有效性) 数据显示(在View层显示相应的数据) 数据注解相关的命名空间如下: System.ComponentModel.DataAnnotations System.ComponentModel.DataAnnotations.Schema System.Web.Mvc System.Web.Securit

  • 后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法

    后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法

    1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pageindex: 1, pagesize: 8 }) .success(function(){ alert("Mr靖"); }); 代码没有错,但是在后台却接收不到数据,这是为什么呢? 用火狐监控:参数是JSON格式 用谷歌监控:传参方式是request payload 可以发现传参方式是

  • swiper在angularjs中使用循环轮播失效的解决方法

    bug描述:我在anjularjs 中使用了swiper轮播图,通过动态获取到数据插入swiper-slide中,我在swiper初始化中设置了loop(循环),但是在出现了一点小问题,swiper会失效,划不动,当我设置固定的数据通过ng-src 插入到swiper-silde中,会正常轮播,但是第一张图会出现空白.通过查询了资料,发现swiper和angularjs执行的机制是不同的,swiper的机制是:初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类

  • docker实现MySQL数据同步的方法

    docker实现MySQL数据同步的方法

    大家好,今天分享一下docker的一个实战 我们使用docker 实现MySQL 的数据同步 搜索mysql 镜像 [root@localhost ~]# docker search mysql NAME DESCRIPTION STARS OFFICIAL AUTOMATED mysql MySQL is a widely used, open-source relation- 12222 [OK] mariadb MariaDB Server is a high performing ope

  • php中实现xml与mysql数据相互转换的方法

    本文实例讲述了php中实现xml与mysql数据相互转换的方法.分享给大家供大家参考.具体分析如下: 这里提供了一个mysql2xml转换类,可以快速的把xml转换成mysql同时反之也可以把mysql转换成xml,下面看代码. mysql2xml.php类文件,用于备份MySQL数据的,代码如下: 复制代码 代码如下: <?php class MySQL2XML {         protected $conn;         protected $result;         prot

  • C#应用BindingSource实现数据同步的方法

    本文以实例形式讲述了C#应用BindingSource实现数据同步的方法,对C#数据库程序开发来说具有一定的参考借鉴价值.具体实现方法如下: 下面的代码示例演示如何使用 BindingSource 组件,将三个控件(两个文本框控件和一个 DataGridView 控件)绑定到 DataSet 中的同一列. 该示例演示如何处理 BindingComplete 事件,并确保当一个文本框的文本值更改时,会用正确的值更新其他文本框和 DataGridView 控件. 具体代码如下: // Declare

  • Vue 中使用vue2-highcharts实现曲线数据展示的方法

    1.要实现的效果如下图: 2.vue前端页面如下: <template> <div> <div> <div> <img src="../assets/index/back.png" class="rank-head-back" @click="routerBack"/> <span >历史曲线</span> </div> </div> &l

  • Angularjs中date过滤器失效的问题及解决方法

    在开发中遇到date过滤器失效的问题,在其他页面date过滤器没有问题,但是在这个页面出现了问题,后来发现是因为{{now | date : 'yyyy-MM-dd HH:mm:ss'}} now必须是时间戳格式的,后面的过滤器才会生效.而我从后端传过来的时间数据是字符串所以过滤器无法生效 解决方法:在后端处理要传的数据,将里面的时间转为时间戳即可(下面贴我百度到的) /** * 时间转时间戳 */ public static String dateToStamp(String s) throw

  • AngularJS中重新加载当前路由页面的方法

    这个问题同样困扰我很久,网上的回答五花八门,全都不能解决:终于在网上找很久,看到某大神的解决办法,整理作此分享:使用ui-router重新加载当前页面的问题.(ui-router版本需要是0.2.14以上的) 用angular做项目,会碰到需要点击菜单刷新当前页面,加载当前页面,但是同一个路由页面点击没反应: 假设我们的路由页面 app.toMenu ; <a href="#" rel="external nofollow" rel="externa

随机推荐