用angular引入复杂的json文件
我们在写网页时是有很多的重复代码和重复样式的,我们也不能一口气敲下来,这样就成为了体力劳动了。
所以我在遇到这种情况的时候大部分是用angular来获取json的,而用angular来让json数据库中的数据导入到网页中是让我们不用重复的书写重复的代码。
但是一些子元素较少的还比较好整,但是象下拉列表就比较麻烦了。不止写json文件比较麻烦,连获取json都变的复杂啦。
比如说我们在写一个这样的json文件时
"recruit":[
{"name":"1","describe":[
{"descr":"2"},
{"descr":"3"},
{"descr":"4"},
{"descr":"5"},
{"descr":"6"}
],
"describe1":[
{"descr":"11"},
{"descr":"22"},
{"descr":"33"},
{"descr":"44"},
{"descr":"55"},
{"descr":"66"}
]}
]
这种的json文件相信大家都看到过,这种json获取时不像我们获取哪种单一的json时那么简单,我们在获取的时候要使用【下标】来获取到我们想要的数据。
app.controller('test',function($scope,$http){
$http.get('../data/data.json').success(function(data){
$scope.Data = data.recruit;
$scope.headerNav = $scope.Data[0].name;
$scope.headerNav1 = $scope.Data[1].describe;
$scope.headerNav1 = $scope.Data[2].describe1;
}).error(function(s){
alert(s);
})
})
这样我们就可以获取到自己想要的数据,并书写到页面中了
用angular引入复杂的json文件的更多相关文章
- 用angular引入复杂的json文件2
昨天我们也说了一下angular引入复杂json文件的方法,今天我们再来学习一种方法,而且更简单,更快捷. 首先我们引入一个angular插件,并且写上引入模块和控制台,在html中书写上模块名和控制 ...
- vue怎么引入外网json文件
今日吃午饭时,伊万卡前端小妹问了我一个问题."App中有一个模块是用H5做的,其中有一个接口读取的是本地json资源文件,但是这个文件修改时间不定,我又不想每次修改了这个文件再重新发版打个包 ...
- vue.js学习笔记(二):如何加载本地json文件
在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...
- vue.js 如何加载本地json文件
在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...
- angular js根据json文件动态生成路由状态
项目上有一个新需求,就是需要根据json文件动态生成路由状态,查阅了一下资料,现在总结一下发出来: 首先项目用到的是angular的UI-路由,所以必须引入angular.js和angular-ui- ...
- Angular Npm Package.Json文件详解
Angular7 Npm Package.Json文件详解 近期时间比较充裕,正好想了解下Angular Project相关内容.于是将Npm官网上关于Package.json的官方说明文档进行了 ...
- comTest.json文件中内容,被NewsList.vue文件引入
本文目标:就是把扩散名为.json文件中数据,传递给NewsList.vue文件.主要通过导出,并传递给data(){}变紧 新建文件名为:commTest.json { "schoolNa ...
- 使程序能够引入.json文件, 为网站添加 MIME 映射
确认启用了 MIME 映射,或使用命令行工具 appcmd.exe 为网站添加 MIME 映射. 若要设置 MIME 类型,请在 IIS Express 安装目录中运行以下命令: appcmd set ...
- Semi-colon expected (eclipse 引入 json文件报错)
最近做的项目用到的前端框架有一个json文件夹,里面全是json文件,所以导入Eclipse的时候会在整个项目上都是红叉,但是其实不影响项目运行的,之前忙着码代码也没时间管他,这个红叉存留了一个月!今 ...
随机推荐
- beyond compare比较工具设置
beyond compare用于比较的工具,云盘:比较 链接: https://pan.baidu.com/s/1boZbB0F
- 使用 nice、cpulimit 和 cgroups 限制 cpu 占用率
Linux内核是一名了不起的马戏表演者,它在进程和系统资源间小心地玩着杂耍,并保持系统的能够正常运转. 同时,内核也很公正:它将资源公平地分配给各个进程. 但是,如果你需要给一个重要进程提高优先级时, ...
- Proguard语法及常用proguard.cfg代码段
本文主要ProGuard常用语法.标准proguard.cfg文件内容.常用proguard.cfg代码段及proguard与log level结合解决debug模式日志问题. 1.ProGuard的 ...
- cocos2d-x lua 学习笔记(1) -- 环境搭建
Cocos2d-x 3.0以上版本的环境搭建和之前的Cocos2d-x 2.0 版差异较大的,同时从Cocos2d-x 3.0项目打包成apk安卓应用文件,搭建安卓环境的步骤有点繁琐,但搭建一次之后, ...
- CSS3 Flex布局(伸缩布局盒模型)学习
CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
- 关于浏览器对静态HTML页面的缓存问题
症状: 刚才为了测试TOMCAT的BASIC安全验证,修改了tomcat-users.xml和/WEB-INF/web.xml之后进行测试,<url-pattern>/*<url-p ...
- CSS学习笔记(8)--纯CSS绘制三角形(各种角度)
纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单. 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...
- exit会结束一个进程
#include <stdio.h> #include <unistd.h> #include <sys/types.h> #include<stdlib.h ...
- 一个通用的JavaScript分页
1.JavaScript代码 Pagination=function(id) { var totalNum=0; var maxNum=10; var pageUrl=""; va ...
- VMware ESXi vsan.v00卡 停
重装VMware ESXi 6.5,结果在loading vsan.v00文件的时候卡住了,过了几个小时都停留在这个界面.无意间重启使用UEFI 启动,提示某文件校验出错,MD5对不上,重新写入安装镜 ...