最近由于工作原因,开始写点前端的东西。前两天刚开始了解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传值问题的更多相关文章

  1. AngularJS开发指南11:AngularJS的model,controller,view详解

    model model这个词在AngularJS中,既可以表示一个(比如,一个叫做phones的model,它的值是一个包含多个phone的数组)对象,也可以表示应用中的整个数据模型,这取决于我们所讨 ...

  2. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  3. AngularJS中如何对Controller与Service进行分层设计与编码

    初学者的Controller 在我们当接触NG后,如需要通过访问远程的API获取一系列的数据进行显示,通常我的Controller代码会写成下面的样子: angular.module('demo') ...

  4. 八、angularjs 中 filter在controller中的使用--避免多次遍历

    filter在html页面的使用司空见惯,比如: filter在controller中使用可以避免多次使用angular.foreach,来进行遍历.例如: 如果使用filter,则会让代码简洁而且明 ...

  5. AngularJS中实现Model缓存

    在AngularJS中如何实现一个Model的缓存呢? 可以通过在Provider中返回一个构造函数,并在构造函数中设计一个缓存字段,在本篇末尾将引出这种做法. 一般来说,Model要赋值给Scope ...

  6. AngularJS中使用Directive、Controller、Service

    AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉. (1)Directive 指令 (2)Controller 控制器 (3)Service ...

  7. angular中不同controller传值问题

    利用angularJS中service单例模式的特性,服务(service)提供了一种能在应用的整个生命周期内保持数据的方式,能够在控制器之间进行通信,且能保证数据的一致性. 一般我们都会封装serv ...

  8. AngularJS自定义Directive中link和controller的区别

    在AngularJS中,自定义Directive过程中,有时用link和controller都能实现相同的功能.那么,两者有什么区别呢? 使用link函数的Directive 页面大致是: <b ...

  9. AngularJS 中 Controller 之间的通信

    用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...

随机推荐

  1. 使用Docker link搭建PHP开发环境

    一般我们会把nginx.php都安装在同一个容器,为了扩展方便,我们希望nginx和php分开.那么就可以使用docker link命令实现这一目的. 需要的镜像: nginx 1.12.2 php( ...

  2. 捋一捋js面向对象的继承问题

    说到面向对象这个破玩意,曾经一度我都处于很懵逼的状态,那么面向对象究竟是什么呢?其实说白了,所谓面向对象,就是基于类这个概念,来实现封装.继承和多态的一种编程思想罢了.今天我们就来说一下这其中继承的问 ...

  3. 【数据结构】——搜索二叉树的插入,查找和删除(递归&非递归)

    一.搜索二叉树的插入,查找,删除 简单说说搜索二叉树概念: 二叉搜索树又称二叉排序树,它或者是一棵空树,或者是具有以下性质的二叉树 若它的左子树不为空,则左子树上所有节点的值都小于根节点的值 若它的右 ...

  4. Java基础系列--static关键字

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/8477914.html 一.概述 static关键字是Java诸多关键字中较常使用的一个,从 ...

  5. ARM平台的虚拟化介绍

    本篇博文主要介绍虚拟化的基本思想以及在arm平台如何做虚拟化,arm提供的硬件feature等等. 虚拟化技术简介 虚拟化技术 虚拟化是一个概念,单从这个概念的角度来看,只要是用某一种物品去模拟另一种 ...

  6. 使用nio对磁盘下的文件进行过滤

    上篇博文讲到为了解决tomcat日志自动清理的问题,翻看了tomcat-juli这个jar包.在FileHandler类下有一个利用nio完成对磁盘下过期文件进行过滤的功能实现,正好这段时间正在学习n ...

  7. core java

    ConsoleTest,这个程序如果在IDE里运行就会因无法获得控制台而报错 import java.io.Console; public class ConsoleTest { public sta ...

  8. hihoCoder 1493 : 歌德巴赫猜想 素数筛法

    题意:哥德巴赫猜想认为"每一个大于2的偶数,都能表示成两个质数之和".给定一个大于2的偶数N,你能找到两个质数P和Q满足P<=Q并且P+Q=N吗?如果有多组解,输出P最小的一 ...

  9. 将DataSet转化成XML格式的String类型,再转化回来。

    /// <summary> /// 获取DataSet的Xml格式 /// </summary> public static string GetDataSetXml(this ...

  10. Luogu P1092 虫食算

    题目描述 所谓虫食算,就是原先的算式中有一部分被虫子啃掉了,需要我们根据剩下的数字来判定被啃掉的字母.来看一个简单的例子: 43#9865#045 +8468#6633 44445509678 其中# ...