编程 Javascript

AngularJS基础 ng-model 指令详解及示例代码

Posted in Javascript onAugust 02, 2016

AngularJS ng-model 指令

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"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<input ng-model="name">

<p>input 输入框的值绑定了变量 "name" :</p>
{{name}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "John Doe";
});
</script>

<p>该实例演示了如何使用 ng-model 指令绑定输入框的值到 scope 变量中。</p>

</body>
</html>

定义和用法

ng-model 指令绑定了 HTML 表单元素到 scope 变量中。

如果 scope 中不存在变量, 将会创建它。

语法

<input>, <select>, <textarea>, 元素支持该指令。

参数值

值	描述
separator	你想要绑定到表单域的属性名。

以上就是对AngularJS ng-model资料的整理，后续继续补充相关资料。

AngularJS基础 ng-model 指令详解及示例代码

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

超强的IE背景图片闪烁(抖动)的解决办法

Sep 09 Javascript

jquery中eq和get的区别与使用方法

Apr 14 Javascript

JS字符串累加Array不一定比字符串累加快(根据电脑配置)

May 14 Javascript

js读取json的两种常用方法示例介绍

Oct 19 Javascript

理解js回收机制通俗易懂版

Feb 29 Javascript

js剪切板应用clipboardData实例解析

May 29 Javascript

JS弹出窗口插件zDialog简单用法示例

Jun 12 Javascript

Javascript实现倒计时（防页面刷新）实例

Dec 13 Javascript

原生JS实现九宫格抽奖效果

Apr 01 Javascript

详解Angular4中路由Router类的跳转navigate

Jun 09 Javascript

axios中cookie跨域及相关配置示例详解

Dec 20 Javascript

vue特效之翻牌动画

Apr 20 Vue.js

JS获取input file绝对路径的方法(推荐)

Aug 02 #Javascript

JavaScript实现复制文章自动添加版权

Aug 02 #Javascript

js获取上传文件的绝对路径实现方法

Aug 02 #Javascript

AngularJS基础 ng-list 指令详解及示例代码

Aug 02 #Javascript

jQuery设置聚焦并使光标位置在文字最后的实现方法

Aug 02 #Javascript

jQuery实现的placeholder效果完整实例

Aug 02 #Javascript

AngularJS基础 ng-keyup 指令简单示例

Aug 02 #Javascript