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编程起步(第四课)
Feb 27 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
详解JS数值Number类型
Feb 07 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 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中的实现trim函数代码
2007/03/19 PHP
PHP防注入安全代码
2008/04/09 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
详解Python_shutil模块
2019/03/15 Python
Python中super函数用法实例分析
2019/03/18 Python
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
塔吉特百货公司官网:Target
2017/04/27 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
学校经典推荐信
2013/10/30 职场文书
物流专业大学应届生求职信
2013/11/03 职场文书
中级会计职业生涯规划范文
2014/01/16 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
活动倡议书范文
2014/05/13 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
2016中考冲刺决心书
2015/09/22 职场文书