angular自学实例(2)ng-model

这里介绍一下angular的ng-model指令,前面的例子我们介绍了hellow world,然后这篇文章主要介绍ng-model指令先上代码:

<!doctype html>
<html lang="en" ng-app='App'>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='../angular-1.3.9/angular.js'></script>
</head>
<body ng-controller='modulecont'>
<input type="text" ng-model='conter'>
<div>hellow,{{conter || text}}</div>
<script>
var App=angular.module('App',[])
App.controller('modulecont',function($scope){
$scope.text='world';
})
</script>
</body>
</html>

之前的hellow world是通过angular解析页面中的text变量然后通过控制器给他赋值,然后ng-model有什么用呢,首先在页面上添加一个input框,然后给他一个ng-model指令后面跟一个变量,你在input输入什么内容后面的变量就是你输入的内容,这不难理解!

ng-model的原理大家自己去官网看api吧,其实我擅长的js,如果不通过angularjs实现这一功能需要不少代码,首先需要给input加一个change事件然后获取input的value,然后哪里需要这个输入的内容,在需要的地方赋值就实现了!

所以喜欢angular的简单,一个指令就可以实现一个很实用的效果。大家快试试吧!

posted @ 2015-09-10 11:06  奔跑的攻城狮  阅读(140)  评论(0编辑  收藏  举报