AngularJS 使用模板

比如要生成一样的行:

<div class="panel-body">
                <ul class="list-group">
                    <li ng-repeat="timeSheet in timeSheetsOverview | filter:isWorking | orderByDate:‘date‘:true" class="list-group-item" ng-click="$parent.goWeek(timeSheet.date)" ng-include="‘timeItem.html‘">
                    </li>
                </ul>
            </div>

模板:

<script type="text/ng-template" id="timeItem.html">
    <div class="row row-2">
        <div class="col-xs-10">
            <div class="overflow-panel">
                <div class="ver-mid-panel overflow">
                    <span class="font-blue">{{timeSheet.startDateString}} - {{timeSheet.endDateString}} {{timeSheet.yearString}}</span>
                    <br />
                    <span class="font-small">Week {{timeSheet.weekNumber}}</span>
                </div>
            </div>
        </div>
        <div class="col-xs-2">
            <div class="pull-right">
                <div class="ver-mid-panel">
                    <span class="font-blue">{{timeSheet.totalHours | number:2}}</span>
                    <br />
                    <br />
                </div>
            </div>
        </div>
    </div>
</script>
时间: 2024-12-28 19:01:49

AngularJS 使用模板的相关文章

AngularJS学习--- AngularJS中模板链接和图像 ng-src step6

接上一篇文章,本文将主要介绍angularjs中的模板链接,和图像显示? 首先,切换分支,启动项目: git checkout step-6 npm start 1.效果 相较于前一篇文章,明显感觉多了图片,那么这些图片是怎么加载进去的呢?这里图片各不一样,如果用传统的方式去加载图片可能要写很多代码,这里看一下angularjs是如何实现的?? 2.实现代码 app/index.html <ul class="phones"> <li ng-repeat="

以及ajax以及angularjs 动态模板加载并进行渲染

1. 源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/java

AngularJS开发指南12:AngularJS的模板,CSS,数据绑定详解

模板 AngularJS模板是一种声明式的规则.它包含了模型和控制器的信息,最后会被渲染成用户在浏览器中看到的视图.它是静态的DOM,包含HTML,CSS和AngularJS指定的元素和属性.AngularJS元素和属性让angular给模板DOM添加行为,或者变形,成为动态地DOM. 下面是你能在模板中用到的AngularJS元素和属性: 指令 — 一个用来扩张已存在的DOM元素或者表现可重用DOM组件的属性或者元素.也可称为widget. 混合(Markup) — 双花括号是angular内

angularJS指令模板替换

<html> <head> <meta charset="utf-8"/> <title></title> </head> <body ng-app="components"> <myelement> <h1>哈哈</h1> </myelement> </body> <script src="angular.

AngularJS 动态模板

AngularJS版本 : AngularJS v1.4.0-rc.1 <!doctype html> <html ng-app="dynamicTemplate"> <head> <script src="jslib/angular.js"></script> <script type="text/javascript"> angular.module('dynamicTe

浅谈angular2与angularJS的区别

简介 大家好,今天给大家介绍一下angular,相信做过前端的小伙伴们都知道angular的大名,angularJS自2012年发布起就受到了大家的广泛关注.他首次提出了双向绑定概念让所有人都耳目一新,2016年angular2正式被发布,那么angular2到底有什么值得期待的地方呢,接下来讲一下angular2吸引人的地方. 1.1.1  angularJS的困境以及angular2的新特性 首先呢我们讨论一下angularJS的一些不足之处: 1.饱受诟病的性能问题 通过检查进行数据更新,

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

原文地址:http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single 渣译,各位看官请勿喷 引言: ... 单页面应用程序(SPA),被定义为在一个独立的页面上??提供类似于桌面应用程序级用户体验为目标的网站.在SPA, 基本上所有的代码 - 例如 HTML,JavaScript和CSS - 都是在响应用户操作时动态加载的.页面没有在任何时候被重新刷新,也没有跳转到另一

angularjs基本执行流程

近期温习了下angularjs执行流程,备记下.以便查看. 主要的执行流程例如以下: 1.用户请求应用起始页. 2.用户的浏览器向server发起一次HTTP连接,然后载入index.html页面,这个页面里面包括了模板. 3.angular被载入到页面中,等待页面载入完毕 ,然后查找了ng-app指令,用来定义模板边界. 4.angularjs遍历模板,查找指令和绑定关系,这将触发一系列动作:注冊监听器,运行一些Dom操作,从server获取初始化数据.这项工作的最后结果是, 应用将会启动起来

使用AngularJS的三个重要原因

入门教程:http://www.ituring.com.cn/minibook/303 : http://angularjs.cn/tag/AngularJS 原因一:Google开发的框架 要知道开源界的很多框架都是开发人员由于个人兴趣或者激情而开发出来的,比如,Cappucino 还有 Knockout.而anguar.js是由互联网巨人Google组织开发的.这意味这你有更加强大的社区支持.谁都不希望第一天开始使用一个框架,第二天发现这个框架已经被遗弃了吧! 其实这不是Google第一次尝