我们在写网页时是有很多的重复代码和重复样式的,我们也不能一口气敲下来,这样就成为了体力劳动了。

所以我在遇到这种情况的时候大部分是用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文件的更多相关文章

  1. 用angular引入复杂的json文件2

    昨天我们也说了一下angular引入复杂json文件的方法,今天我们再来学习一种方法,而且更简单,更快捷. 首先我们引入一个angular插件,并且写上引入模块和控制台,在html中书写上模块名和控制 ...

  2. vue怎么引入外网json文件

    今日吃午饭时,伊万卡前端小妹问了我一个问题."App中有一个模块是用H5做的,其中有一个接口读取的是本地json资源文件,但是这个文件修改时间不定,我又不想每次修改了这个文件再重新发版打个包 ...

  3. vue.js学习笔记(二):如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...

  4. vue.js 如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...

  5. angular js根据json文件动态生成路由状态

    项目上有一个新需求,就是需要根据json文件动态生成路由状态,查阅了一下资料,现在总结一下发出来: 首先项目用到的是angular的UI-路由,所以必须引入angular.js和angular-ui- ...

  6. Angular Npm Package.Json文件详解

    Angular7 Npm Package.Json文件详解   近期时间比较充裕,正好想了解下Angular Project相关内容.于是将Npm官网上关于Package.json的官方说明文档进行了 ...

  7. comTest.json文件中内容,被NewsList.vue文件引入

    本文目标:就是把扩散名为.json文件中数据,传递给NewsList.vue文件.主要通过导出,并传递给data(){}变紧 新建文件名为:commTest.json { "schoolNa ...

  8. 使程序能够引入.json文件, 为网站添加 MIME 映射

    确认启用了 MIME 映射,或使用命令行工具 appcmd.exe 为网站添加 MIME 映射. 若要设置 MIME 类型,请在 IIS Express 安装目录中运行以下命令: appcmd set ...

  9. Semi-colon expected (eclipse 引入 json文件报错)

    最近做的项目用到的前端框架有一个json文件夹,里面全是json文件,所以导入Eclipse的时候会在整个项目上都是红叉,但是其实不影响项目运行的,之前忙着码代码也没时间管他,这个红叉存留了一个月!今 ...

随机推荐

  1. 示例 Demo 工程和 API 参考链接

    Camera Explorer:有关 Windows Phone8 中有关增强 Camera API 的使用.文章链接 Filter Effects:对拍摄的照片或者图片库中的照片应用 Nokia I ...

  2. python学习笔记(11)--爬虫下载漫画图片

    说明: 1. 某本子网站爬虫,现在只实现了扒取一页,已经凌晨两点了,又饿又困,先睡觉,明天再写总结吧! 2. 我是明天,我来写总结了! 3. 这个网站的结构是这样的: 主页: 主页-第1页-漫画1封面 ...

  3. java POi excel 写入大批量数据

    直接贴代码: package jp.co.misumi.mdm.batch.common.jobrunner; import java.io.File; import java.io.FileNotF ...

  4. [基础]sizeof和strlen

    转自网络 首先切记,sizeof不能用来求字符串长度 1.sizeof操作符的结果类型是size_t,它在头文件中typedef为unsigned int类型.该类型保证能容纳实现所建立的最大对象的字 ...

  5. 在ubuntu下安装sourceinsight

    执行更新与安装 wine: # sudo apt-get update # sudo apt-get install wine 下载SourceInsight,用wine来安装: 执行:wine so ...

  6. ubuntu -- mf210v拨号流程

      1 脚本建立 Root权限进入Ubuntu,在 /etc/ppp/ 下面建立两个目录,如果有就不需要建立了.直接把脚本放进去或者建立新文件即可. cd /etc/ppp mkdir peers c ...

  7. linux 串口 特殊字符

    近日在写一个linux的串口程序,发现大多数情况下数据接收没问题,但是有时却有问题.主要是接收的字符串中包含有0x03这个字符,会造成与它相邻的字符同时也接收不到,搞了好久才发现这个错误.查找资料后发 ...

  8. json datatable互转(真正能用的-原创)

    网上有不少的转换类 可是不全 或者有错误 我现在贴一个 js 和C# 互转代码 希望能帮到需要的童鞋 首先C#转成 json /// <summary>         /// DataT ...

  9. 特征根法求通项+广义Fibonacci数列找循环节 - HDU 5451 Best Solver

    Best Solver Problem's Link Mean: 给出x和M,求:(5+2√6)^(1+2x)的值.x<2^32,M<=46337. analyse: 这题需要用到高中的数 ...

  10. 构造 - Codeforces Round #319 (Div. 1)C. Points on Plane

    Points on Plane Problem's Link Mean: 在二维坐标中给定n个点,求一条哈密顿通路. analyse: 一开始忽略了“无需保证路径最短”这个条件,一直在套最短哈密顿通路 ...