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 相关文章推荐
刷新时清空文本框内容的js代码
Apr 23 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
微信小程序form表单组件示例代码
Jul 15 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 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
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
浅谈js闭包理解
2019/04/01 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
详解Vite的新体验
2021/02/22 Javascript
Python导出DBF文件到Excel的方法
2015/07/25 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
django之自定义软删除Model的方法
2019/08/14 Python
python 实现简单的FTP程序
2019/12/27 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
python模拟实现分发扑克牌
2020/04/22 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
教师工作总结范文2014
2014/11/10 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
教你怎么用python selenium实现自动化测试
2021/05/27 Python