angularjs--ng-repeat

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 6     <title>index</title>
 7     <link href="{$Think.const.CSSURL}bootstrap.min.css" rel="stylesheet" type="text/css"/>
 8     <script src="{$Think.const.JS}jquery.min.js" type="text/javascript"></script>
 9     <script src="{$Think.const.JS}bootstrap.min.js" type="text/javascript"></script>
10     <script src="{$Think.const.JS}angular.min.js" type="text/javascript"></script>
11     <link href="{$Think.const.CSSURL}home/index.css" rel="stylesheet" type="text/css"/>
12 </head>
13 <body ng-app="myapp" ng-controller="myctrl">
14 <div class="container">
15     <h1 class="page-header">前端技术方案</h1>
16     <table class="table table-bordered table-hover">
17         <tr>
18             <th>id</th>
19             <th>name</th>
20             <th>age</th>
21             <th>修改</th>
22             <th>删除</th>
23         </tr>
24         <tr ng-repeat="user in users">
25             <td>{{user.id}}</td>
26             <td>{{user.name}}</td>
27             <td>{{user.age}}</td>
28             <td><a href="#">修改</a></td>
29             <td><a href="#">删除</a></td>
30         </tr>
31     </table>
32     <img src="{$Think.const.HOMEIMG}/01.png" />
33 </div>
34 </body>
35 <script>
36     angular.module("myapp",[]).controller("myctrl",function($scope){
37         $scope.users = [
38             {"id":"1","name":"tom","age":"10"},
39             {"id":"2","name":"jack","age":"20"},
40             {"id":"3","name":"舒克","age":"10"},
41             {"id":"4","name":"贝塔","age":"10"},
42             {"id":"5","name":"yii","age":"12"},
43             {"id":"6","name":"ci","age":"16"},
44         ];
45
46     });
47 </script>
48 </html>
时间: 2024-11-06 20:00:38

angularjs--ng-repeat的相关文章

Part 6 AngularJS ng repeat directive

ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we want to do. 1. For each employee we have in the employees array we want a table row. With in each cell of the table row we to display employee Firstna

Part 15 AngularJS ng init directive

The ng-init directive allows you to evaluate an expression in the current scope. In the following example, the ng-init directive initializes employees variable which is then used in the ng-repeat directive to loop thru each employee. In a real world

table sorting&ndash;angularjs

1: <script type="text/javascript" ng:autobind 2: src="http://code.angularjs.org/0.10.5/angular-0.10.5.js"></script> 3:   4: <table ng:controller="SortableTableCtrl"> 5: <thead> 6: <tr> 7: <th

[译]用AngularJS构建大型ASP.NET单页应用(三)

原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single AngularUI 下面的示例中使用了AngularUI的各种UI组件.AngularUI 是AngularJS 框架的一个辅助套件.示例中使用的主要组件大部分来在AngularUI 的一个子集UI Bootstrap.UI Bootstrap是从Twitter Bootstrap派生出来的,它使用A

[AngularJS] AngularJS系列(1) 基础篇

目录 什么是AngularJS? 为什么使用/ng特性 Hello World 内置指令 内置过滤器 模块化开发 一年前开始使用AngularJS(以后简称ng),如今ng已经出2了.虽说2已完全变样,但是1.x还是足够优秀. 什么是AngularJS? ng是一个js框架,目前最新版本为1.5.8. 官网:https://angularjs.org/ 下载: Install-Package AngularJS.Core npm install [email protected] 为什么使用/n

Node.js开发入门—引入UIBootstrap

很多Web管理系统的侧边菜单是可折叠的(手风琴样式),我们在前面两篇文章里的HTML模板,自己用div.css做了一些处理,可效果不好.所以我请来了一个前端UI框架,UI Bootstrap,来帮忙.别看它名字里带一个Bootstrap,但它并不依赖Bootstrap,而是用AngularJS实现的原生指令哦.我讨厌太多的依赖,这个我喜欢. 这篇我们以"Angular简单示例"里的AngularDemo为基础,我说到的目录什么的,都遵循express应用的默认目录结构. UI Boot

ngForm

ngForm用于ng repeat隔离控件名 <form name="userForm" novalidate> <div class="form-group" ng-repeat="user in formData.users" ng-class="{ 'has-error' : userFieldForm.email.$invalid }"> <ng-form name="userF

ES6 的字符串扩展

{ console.log('a',`\u0061`); console.log('s',`\u20BB7`); console.log('s',`\u{20BB7}`); } { let s='??'; console.log('length',s.length); console.log('0',s.charAt(0)); console.log('1',s.charAt(1)); console.log('at0',s.charCodeAt(0)); console.log('at1',s

走进AngularJs(二) ng模板中常用指令的使用方式

通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板开始入手是个不错方式,因为这部分内容相对简单好理解,而且是视图层的东西,大家都喜欢可以立马看得见的东西嘛.本篇我将搜罗模板中的常用指令一一测试,了解其使用方法,有点像背单词的感觉,会比较枯燥.不过对于初学,这样的枯燥是必须要经历的,开始~ 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下

走进AngularJs(八) ng的路由机制

在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以在页面上放一个大大的返回按钮,让用户点击返回来导航,但总是无法避免用户习惯性的点后退.解决此问题的一个方法是使用hash,监听hashchange事件来进行视图切换,另一个方法是用HTML5的history API,通过pushState(