AngularJS中Model和Controller传值问题
最近由于工作原因,开始写点前端的东西。前两天刚开始了解AngularJS这门技术,当然,新手免不了会爬坑!
今天分享一篇关于--》 模型传参给Controller的实例:
需求: 具体是 首先点击对象名称,把该名称绑定的Id传到Controller,再接收后台根据ID查询的一条记录,回显在页面上
解决方法:
一 、由于是点击对象名称,所以我们先把该对象的名称用<a></a>标签的格式包起来
field.html :

如上图:<a></a>标签中 href是用来跳转到目标页面的 ;
外面一层<div></div>比较重点,可见,给了一个点击事件:ng-click = " byFieldId( x . fieldId ) " ; 其中byFieldId就是点击事件的名字。
二 、接下来我们需要在js里配置一下路径:
main.js :

很清晰的能看到,/ fieldupdate 就是第一个图中<a></a>标签要跳转的路径,templateUrl 是用来指定HTML的路径,compath是提前在配置文件里写好的本机的访问路径,以免每次都要再重申。
这样会跳到fieldupdate.html页面。
三 、下面的controller就是重点啦,
但是写controller之前有一个很重点的是什么呢?要引入js文件啊!!!
上图:
main.js :

千万不要忘了!(写在路径的下面)
下图是controller中的方法:
fieldupdate.js :

这里的FIELDID从哪里来呢?我们在主html中定义了一个全局变量:
main.html :

那么如何能从方法跳到该controller呢?我在主js中定义了:
field.js :

至此,已经实现了点击a标签 ,触发一个点击事件,通过scope把id传给controller,controller去找到后台的控制器Controller再调接口等等一系列操作,返回一条记录用data接收。
四 、下面要实现的就是在页面显示啦,很简单 : ng-bind = " data.data.fieldId " , ng-bind = " data.data.fieldName " 等等... 这样就可以拿到该对象的各个属性。
AngularJS中Model和Controller传值问题的更多相关文章
- AngularJS开发指南11:AngularJS的model,controller,view详解
model model这个词在AngularJS中,既可以表示一个(比如,一个叫做phones的model,它的值是一个包含多个phone的数组)对象,也可以表示应用中的整个数据模型,这取决于我们所讨 ...
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- AngularJS中如何对Controller与Service进行分层设计与编码
初学者的Controller 在我们当接触NG后,如需要通过访问远程的API获取一系列的数据进行显示,通常我的Controller代码会写成下面的样子: angular.module('demo') ...
- 八、angularjs 中 filter在controller中的使用--避免多次遍历
filter在html页面的使用司空见惯,比如: filter在controller中使用可以避免多次使用angular.foreach,来进行遍历.例如: 如果使用filter,则会让代码简洁而且明 ...
- AngularJS中实现Model缓存
在AngularJS中如何实现一个Model的缓存呢? 可以通过在Provider中返回一个构造函数,并在构造函数中设计一个缓存字段,在本篇末尾将引出这种做法. 一般来说,Model要赋值给Scope ...
- AngularJS中使用Directive、Controller、Service
AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉. (1)Directive 指令 (2)Controller 控制器 (3)Service ...
- angular中不同controller传值问题
利用angularJS中service单例模式的特性,服务(service)提供了一种能在应用的整个生命周期内保持数据的方式,能够在控制器之间进行通信,且能保证数据的一致性. 一般我们都会封装serv ...
- AngularJS自定义Directive中link和controller的区别
在AngularJS中,自定义Directive过程中,有时用link和controller都能实现相同的功能.那么,两者有什么区别呢? 使用link函数的Directive 页面大致是: <b ...
- AngularJS 中 Controller 之间的通信
用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...
随机推荐
- python学习:调用其他函数
vim wc.py #!/usr/bin/python def wordCount(s): chars = len(s) words = len(s.split()) ...
- 【数据结构】——搜索二叉树的插入,查找和删除(递归&非递归)
一.搜索二叉树的插入,查找,删除 简单说说搜索二叉树概念: 二叉搜索树又称二叉排序树,它或者是一棵空树,或者是具有以下性质的二叉树 若它的左子树不为空,则左子树上所有节点的值都小于根节点的值 若它的右 ...
- 利用FileReader实现上传图片前本地预览
引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...
- JAVA浮点数计算精度损失底层原理与解决方案
浮点数会有精度损失这个在上大学的时候就已经被告知,但是至今完全没有想明白其中的原由,老师讲的时候也是一笔带过的,自己也没有好好琢磨.终于在工作的时候碰到了,于是google了一番. 问题: 对两个do ...
- Visual Studio 环境路径答疑!
工程目录结构如下: Console │ Console.sln │ Console.VC.db │ ├─Console │ │ Console.cpp │ │ Console.vcxproj │ │ ...
- uva1343 IDA*
这题需要用数组记录每个block的位置.启发函数:d+wa(8-当前最多相同个数)>maxd直接退出 AC代码: #include<cstdio> #include<cstri ...
- 快了快了,你的 MacBook Pro 和 FineUICore!
着玻璃窗,看到星巴克里那帮人拿着MacBook喝咖啡,你是不是要默念一遍:这帮傻叉,就爱装逼! 不过话说回来,你想不想尝试下这个傻叉的感觉? 是时候了,给自己一个理由,拥有自己的 MacBook Pr ...
- javascript模块化编程库require.js的用法
随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...
- Mapreuduce实现网络数据包的清洗工作
处理后的数据可直接放到hive或者mapreduce程序来统计网络数据流的信息,比如当前实现的是比较简单的http的Get请求的统计 第一个mapreduce:将时间.十六进制包头信息提取出来,并放在 ...
- mysql命令汇总
1.mysql新增.删除用户和权限分配 查看用户及权限 mysql>use mysql mysql>select * from user\G; 新增用户 mysql>insert i ...