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

 更新时间:2016年08月02日 10:17:29   投稿:lqh  
本文主要介绍AngularJS ng-model 指令,这里帮大家整理了ng-model的基本资料,并附有示例代码,有需要的小伙伴可以参考下

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 中不存在变量, 将会创建它。

语法

<element ng-model="name"></element>

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

参数值

 

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

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

相关文章

  • angularjs 源码解析之injector

    angularjs 源码解析之injector

    这篇文章主要介绍angular中实现依赖注入的”幕后英雄” — 注入器(Injector)。说它是”幕后英雄”,是因为它才是依赖注入得以实现的主力。我们从源码上来分析下他吧
    2016-08-08
  • Angular.js中angular-ui-router的简单实践

    Angular.js中angular-ui-router的简单实践

    本篇文章主要介绍了Angular.js中angular-ui-router的简单实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • AngualrJs清除定时器遇到的坑

    AngualrJs清除定时器遇到的坑

    这篇文章主要介绍了AngualrJs清除定时器遇到的坑,需要的朋友可以参考下
    2017-10-10
  • AngularJS安装版本问题解析

    AngularJS安装版本问题解析

    这篇文章主要介绍了AngularJS安装版本问题解析,在这需要注意在安装前请确保自己安装NodeJS环境版本为V18及以上,否则会因node版本问题导致项目无法正常运行,需要的朋友可以参考下
    2024-02-02
  • 教你用AngularJS框架一行JS代码实现控件验证效果

    教你用AngularJS框架一行JS代码实现控件验证效果

    简单来说Angular.js是google开发者设计和开发的一套前端开发框架,帮助你简化前端开发的负担。到底能简化到什么程度呢,今天我们来看下,一行代码实现控件验证效果,有木有吓尿?
    2014-06-06
  • angular中子控制器向父控制器传值的实例

    angular中子控制器向父控制器传值的实例

    今天小编就为大家分享一篇angular中子控制器向父控制器传值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 详解angular如何调用HTML字符串的方法

    详解angular如何调用HTML字符串的方法

    这篇文章主要介绍了详解angular如何调用HTML字符串的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Angularjs Promise实例详解

    Angularjs Promise实例详解

    Promise是一个构造函数,自己身上有all、reject、resolve这几个异步方式处理值的方法,原型上有then、catch等同样很眼熟的方法,下面通过实例代码给大家讲解angularjs promise 的相关知识,感兴趣的朋友一起看看吧
    2018-03-03
  • AngularJS中$interval的用法详解

    AngularJS中$interval的用法详解

    在AngularJS中$interval用来处理间歇性处理一些事情,接下来通过本文给大家介绍AngularJS中$interval的用法,需要的朋友参考下
    2016-02-02
  • Angularjs中使用layDate日期控件示例

    Angularjs中使用layDate日期控件示例

    本篇文章主要介绍了Angularjs中使用layDate日期控件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01

最新评论