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 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
javascript中的array数组使用技巧
Jan 31 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
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
for循环连续求和、九九乘法表代码
2012/02/20 PHP
php curl的深入解析
2013/06/02 PHP
yii操作session实例简介
2014/07/31 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
Python数组定义方法
2016/04/13 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
客户答谢会活动方案
2014/08/31 职场文书
丧事答谢词
2015/01/05 职场文书
打架检讨书范文
2015/01/27 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
导游词之江南周庄
2019/12/06 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
Django Paginator分页器的使用示例
2021/06/23 Python
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
Nginx实现负载均衡的项目实践
2022/03/18 Servers
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技