AngularJS控制器controller给模型数据赋初始值的方法


Posted in Javascript onJanuary 04, 2017

本文实例讲述了AngularJS控制器controller给模型数据赋初始值的方法。分享给大家供大家参考,具体如下:

之前的文章《AngularJS入门示例之Hello World详解》,很简单的就实现了模型数据和页面显示的自动绑定。现在我们使用控制器,给模型赋初始值。如果使用jQuery来实现变量赋初值,需要在页面加载完成后执行

$("#target").attr("value",selfValue);

使用AngularJS代码如下:

<!doctype html>
<html lang="en" ng-app>
  <head>
    <meta charset="utf-8">
    <title>Hello,World!</title>
    <script src="angular1.2.25.js"></script>
    <script>
    function WholeController($scope)
    {
    $scope.yourName = "aty";
    }
    </script>
  </head>
  <body ng-controller="WholeController">
    <input type="text" ng-model="yourName">
    <h1>Hello, {{yourName}}</h1>
  </body>
</html>

这里需要注意:函数名必须与ng-controller中的名称一致,函数的参数$scope名次也是固定的,不能随便修改。这样的话,AngularJS框架会自动执行我们的控制器,并将作用域对象注入到函数参数。很显然这种方式非常不好,因为不能改变函数参数名,后面我会看到还有别的方式来达到同样的目的,后续我们再继续学习。可以看到Controller就是一个JavaScript 函数,在 Angular 里,当这个函数通过 ng-controller 指令绑定到 DOM 上的时候,这个函数就是 Controller 了,我们可以为 Controller Scope 对象。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
深入理解vue-class-component源码阅读
Feb 18 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 #Javascript
微信小程序 石头剪刀布实例代码
Jan 04 #Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 #Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 #Javascript
AngularJS入门示例之Hello World详解
Jan 04 #Javascript
详解AngularJS验证、过滤器、指令
Jan 04 #Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 #Javascript
You might like
献给php初学者(入门学习经验谈)
2010/10/12 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
json 实例详细说明教程
2009/10/31 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
js实现随机点名程序
2020/09/17 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
爱情保证书范文
2014/02/01 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
公司租车协议书
2015/01/29 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS