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

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

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

赞 (0)

相关推荐

  • Angularjs中controller的三种写法分享

    前言 在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中controller其实就是一个方法,它有三种写法,下面来一起看看吧. 第一种: <pre name="code" class="javascript">var AppController = ['$scope', function($scope){ $sco

  • 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比如格式化时间/日期的VIEW视图代码: <div ng-app> <p> <label>Select a date</label> <input type="date" id="date" ng-model=&quo

  • AngularJS控制器controller正确的通信的方法

    AngularJS是一款非常强大的前端MVC框架,AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分,都有父级作用域的存在,顶级就是ng-app所在的层级,它的父级作用域就是$rootScope. 每个$scope的$root指向$ro

  • Angularjs的Controller间通信机制实例分析

    本文实例讲述了Angularjs的Controller间通信机制.分享给大家供大家参考,具体如下: 在Angularjs开发一些经验总结中提到我们需要按照业务区分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需要在controller中通信,一般为比较简单的通信机制,告诉同伴controller我的某个你所关心的东西改变了,怎么办?如果你是一个javascript程序员你会很自然的想到异步回调响应式通信-事件机

  • AngularJs学习第五篇从Controller控制器谈谈$scope作用域

    AngularJs学习第五篇从Controller控制器谈谈$scope作用域

    Controller的创建 AngularJs controller使用无处不在,在里代码演示比较简单的创建工作. <!DOCTYPE html> <html xmlns="http://www.w.org//xhtml" ng-app="exampleApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset

  • angularJS+requireJS实现controller及directive的按需加载示例

    最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需加载控制器js文件及指令js文件的效果: 思路如下 1.借助ui-router里面的resolve属性来实现预加载 2.需要借助$controllerProvider动态去注册控制器,$compileProvider动态去注册指令 3.需要借助$q来帮助我们实现异步加载,具体步骤如下所示: 1.在我们定义的app(在定义app.confi

  • AngularJS实现controller控制器间共享数据的方法示例

    AngularJS实现controller控制器间共享数据的方法示例

    本文实例讲述了AngularJS实现controller控制器间共享数据的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myapp"> <head> <title>www.jb51.net 控制器间共享数据</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.co

  • AngularJS利用Controller完成URL跳转

    具体写法举例: 1.js定义一个controller function MyCtrl($scope, $location) { $scope.jumpToUrl = function(path) { //TODO:add code here }; } 2.html里面应用controller <div ng-controller='MyCtrl'> <button ng-click="jumpToUrl('/signin')">signin</button

  • AngularJS 控制器 controller的详解

    AngularJS 控制器 controller的详解 一.控制器概念 控制器在Angualrjs 中的作用是增强视图,并且是一个函数,用来向视图的作用域中添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在页面上创建一个新的控制器是,angularjs会生成并传递一个新的$scope给这个控制器.可以在这个控制器里初始化$scope,由于angularjs会负责处理控制器的实例化过程. 列子: var app=angular.module("myApp",

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

    本文实例讲述了AngularJS控制器controller给模型数据赋初始值的方法.分享给大家供大家参考,具体如下: 之前的文章<AngularJS入门示例之Hello World详解>,很简单的就实现了模型数据和页面显示的自动绑定.现在我们使用控制器,给模型赋初始值.如果使用jQuery来实现变量赋初值,需要在页面加载完成后执行 $("#target").attr("value",selfValue); 使用AngularJS代码如下: <!do

  • python创建列表并给列表赋初始值的方法

    本文实例讲述了python创建列表并给列表赋初始值的方法.分享给大家供大家参考.具体如下: aList = [123, 'abc', 4.56, ['inner', 'list'], 7-9j] anotherList = [None, 'something to see here'] print aList print anotherList aListThatStartedEmpty = [] print aListThatStartedEmpty print list('foo') 运行结

  • layui给下拉框、按钮状态、时间赋初始值的方法

    如下所示: <!--弹框的dom结构--> <div id="add_activity"> <div style="width: 95%;height: 100%;margin: auto;"> <form class="layui-form" lay-filter="formTest"> <table class="layui-table">&l

  • AngularJS select加载数据选中默认值的方法

    问题描述: 在我们开发项目过程中,避免不了会用到select下拉框,那么在angular中如何使用select呢? 解决方案: 可以用ng-options来动态加载option,然后在用ng-model来匹配.代码如下: //html <select ng-model="role_id1" ng-options="o.name for o in list5"></select> //js $scope.list5 = [{"id&q

  • Java读取txt文件中的数据赋给String变量方法

    实例如下所示: public class MainActivity { private static final String fileName = "D:/Tao/MyEclipseWorkspace/resources/weather.txt"; public static void main(String[] args) { //读取文件 BufferedReader br = null; StringBuffer sb = null; try { br = new Buffer

  • select2 ajax 设置默认值,初始值的方法

    在做功能的时候需要修改数据, 修改数据时需要显示原始值. 但是在select2的时候 显示原始值是一个非常非常非常非常非常要命的难题. 研究了3个小时, 最后使用$.ajax 重新加载原始值, 并显示. //two AJAX获取数据方式(每次请求) var $c_HospitalCode = $("#c_HospitalCode").select2({ ajax: { type: 'GET', url: "/Report/AjaxOption/Ajax_LoadHospita

  • laravel框架添加数据,显示数据,返回成功值的方法

    laravel框架添加数据: 添加数据 laravel框架添加数据的方式我这里使用的是model方式,此外还有一种是DB 因为from提交数据,laravel框架需要在from提交中添加一个token,所以这里接受数据也有好几种方式 我使用的是new一个model,在model中定义了我需要的字段 还有一种就是我注释的那里啦.使用$request->except()直接将不需要的post数据排除掉 laravel上传图片也是非常的方便的,只需要一个store就可以了 另外图片的存放地址我就不在这

  • 浅析Linux root设置初始值的方法

    ubuntu默认不允许使用root登录,因此初始root账户是不能使用的,需要在普通账户下利用sudo权限修改root密码. 在终端输入sudo passwd root,按回车,然后系统会提示你输入普通用户的密码(终端输入的密码都是不显示的). 输入后,按回车,然后重复输入两次新的root密码即可激活root用户. 首先登录普通用户,输入下面命令>>> ~$ sudo passwd root [sudo] passwd for you:******(输入用户密码,输入密码不显示) Ent

随机推荐