AngularJS ng-repeat指令及Ajax的应用实例分析


Posted in Javascript onJuly 06, 2017

本文实例讲述了AngularJS ng-repeat指令及Ajax的应用。分享给大家供大家参考,具体如下:

ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。

定义:

<element ng-repeat="expression"></element>

说明:experssion表达式定义了如何循环集合。常用的如:x in records

下面通过一个例子,来说明ng-repeat如何绘制一个表格:

<div ng-app='mainApp' ng-controller='studentController'>
  <table border="0">
    <tr>
      <td>姓</td>
      <td><input type="text" ng-model='student.firstName'></td>
    </tr>
    <tr>
      <td>名</td>
      <td><input type="text" ng-model='student.lastName'></td>
    </tr>
    <tr>
      <td>名字</td>
      <td>{{student.fullName()}}</td>
    </tr>
    <tr>
      <td>科目</td>
      <td>
        <table>
          <tr>
            <th>名字</th>
            <th>标记</th>
          </tr>
          <tr ng-repeat='sub in student.subjects'>
            <td>{{sub.name}}</td>
            <td>{{sub.marks}}</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

表可以使用CSS样式设置样式。

<style>
  table, th , td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
  }
  table tr:nth-child(odd) {
    background-color: #f2f2f2;
  }
  table tr:nth-child(even) {
    background-color: #ffffff;
  }
</style>

利用angularjs的ng-repeat指令绘制表格:

<script>
  var mainApp=angular.module('mainApp',[]); //定义一个名为mainApp的模块
  mainApp.controller('studentController',function($scope){
    $scope.student={
      firstName:'聂',
      lastName:'鹏飞',
      subjects:[
      {name:'物理',marks:73},
          {name:'化学',marks:90},
          {name:'数学',marks:68},
          {name:'英文',marks:85},
          {name:'生物',marks:77},
      ],
      fullName:function(){
        var studentObject;
        studentObject = $scope.student;
        return studentObject.firstName+' '+studentObject.lastName;
      }
    };
  });
</script>

效果:

AngularJS ng-repeat指令及Ajax的应用实例分析

上面例子表格中展示的数据也可以通过ajax请求从服务器中获取,然后利用ng-repeat指令插入到页面中,具体实现见下面代码:

<html>
<head>
<title>Angular JS Controller</title>
<script src="angularjs/angular-1.3.0/angular.min.js"></script>
<style>
  table, th , td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
  }
  table tr:nth-child(odd) {
    background-color: #f2f2f2;
  }
  table tr:nth-child(even) {
    background-color: #ffffff;
  }
</style>
</head>
<body>
  <h2>AngularJS 表格应用示例</h2>
  <div ng-app='mainApp' ng-controller='studentController'>
    <table border="0">
      <tr>
        <td>姓</td>
        <td><input type="text" ng-model='student.firstName'></td>
      </tr>
      <tr>
        <td>名</td>
        <td><input type="text" ng-model='student.lastName'></td>
      </tr>
      <tr>
        <td>名字</td>
        <td>{{student.fullName()}}</td>
      </tr>
      <tr>
        <td>科目</td>
        <td>
          <table>
            <tr>
              <th>名字</th>
              <th>标记</th>
            </tr>
            <tr ng-repeat='sub in student.subjects'>
              <td>{{sub.name}}</td>
              <td>{{sub.marks}}</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
  <script>
    var mainApp=angular.module('mainApp',[]);
    mainApp.controller('studentController',function($scope,$http){
      $scope.student={
        firstName:'聂',
        lastName:'鹏飞',
        fullName:function(){
          var studentObject;
          studentObject = $scope.student;
          return studentObject.firstName+' '+studentObject.lastName;
        },
      };
      var url="data.txt";
      $http.post(url).success(function(response){
        $scope.student.subjects=response;
      })
    });
  </script>
</body>
</html>

说明:需要放在服务器环境中运行

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

Javascript 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 #Javascript
Vue学习之路之登录注册实例代码
Jul 06 #Javascript
AngularJS中ng-class用法实例分析
Jul 06 #Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 #jQuery
JS图片轮播与索引变色功能实例详解
Jul 06 #Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 #jQuery
vue2.0 keep-alive最佳实践
Jul 06 #Javascript
You might like
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
js取得url地址参数实例
2013/02/22 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python切换pip安装源的方法详解
2016/11/18 Python
python实现Zabbix-API监控
2018/09/17 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
户籍证明书标准模板
2014/09/10 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
先进个人申报材料
2014/12/30 职场文书
大学组织委员竞选稿
2015/11/21 职场文书