angularjs--bootstrap(list-group)

 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     <div class="list-group">
17         <a href="#" class="list-group-item active" ng-repeat="user in users">{{user.name}}</a>
18         <a href="#" class="list-group-item" ng-repeat="user in users2">{{user.name}}</a>
19     </div>
20     <img src="{$Think.const.HOMEIMG}/01.png" />
21 </div>
22 </body>
23 <script>
24     angular.module("myapp",[]).controller("myctrl",function($scope){
25         $scope.users = [
26             {"id":"1","name":"tom","age":"10"},
27             {"id":"2","name":"jack","age":"20"},
28             {"id":"3","name":"舒克","age":"10"},
29             {"id":"4","name":"贝塔","age":"10"},
30             {"id":"5","name":"yii","age":"12"},
31             {"id":"6","name":"ci","age":"16"},
32         ];
33
34         $scope.users2 = $scope.users.splice(1);
35
36     });
37 </script>
38 </html>
时间: 2024-10-12 23:39:18

angularjs--bootstrap(list-group)的相关文章

Play1+angularjs+bootstrap ++ (idea + livereload)

我的web开发最强组合:Play1+angularjs+bootstrap ++ (idea + livereload) 时间 2012-12-26 20:57:26  Freewind.me原文  http://freewind.me/blog/20121226/1167.html 首先说明我开发web的情况: 个人开发 前后端全部自己搞定 网站类型多为传统多页面程序 注重开发效率 Javascritp能力不强 美术细胞很少 由于每个人情况不同,选择技术及方案的重点也不同,所以内容仅供参考.对

一个利用HTML5 localStorage功能的todo应用(angularJs+Bootstrap)

今天在网上看到一个简单的todo应用,使用angularJs做前端数据绑定,利用localStorage来存储数据,觉得挺有意思的. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html ng-app="todoApp"> <head> <me

【17】AngularJS&#160;Bootstrap

AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.

AngularJS Bootstrap

引入bootstrap.css. 引入AngularJs.js. <body ng-app="myApp" ng-controller="userCtrl"> <div class=“container”> <h3>User info</h3> <table class="table table-striped"> <thead> <tr> <td>E

基于AngularJs + Bootstrap + AngularStrap 省市区联动实践

什么是 AngularJs?网上一大堆资料,没能真正说明白. AngularJs 就是一个函数库,算不上一个框架,源码2万2千多行,提供了前端MVC的开发方式, 有双向绑定,指令等特性,这是具有革命性的.我是多么反感jQuery 用选择器 选择元素 ,绑定事件,进行一大堆DOM操作,一旦代码过多,非常不好维护,html结构改变,又要重写js代码, 不过 jQuery  对 ajax的封装  是其他框架 匹敌不了的,接近于标准. Bootstrap 是一个 css 库,对于搞后端出生的娃,比较友好

AngularJs+bootstrap搭载前台框架——准备工作

1.关于什么是AngularJs以及什么是bootstrap我就不多说了,简单说下,AngularJs是一个比较强大前台MVC框架,bootstrap是Twitter推出的一个用于前端开发的开源工具包,可以迅速搭建web前台,可以去官网看看(AngularJs:http://angularjs.org/ ,bootstrap:http://twitter.github.io/bootstrap/). 2.github上有一个比较好的纯净AngularJs app的种子,可以去github下载,地

Salesforce + AngularJS + Bootstrap

也可以分成三步: 1. 添加css和js引用: <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></apex:stylesheet> <script src="https://code.angularjs.org/1.4.9/angular.min.js"></script> &

Angularjs bootstrap table多选(全选),支持单击行选中

最终实现效果:  index.html <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-anima

Angularjs+Bootstrap实现分页指令

本插件的开发目的主要给前端同学使用,本人是专注于后台开发的,对css样式不熟悉,但逼于前端要求做一个共公组件方便日常开发,所以这个插件在样式上可能不适合大部分人,喜欢的拿走吧,不喜欢的也请别喷. 一.使用环境 1.Angularjs  1.x 2.Bootstrap 3 在自己的环境里请自行配置js和css,本文不作这方面的介绍. 二.效果图 效果逻辑: 1.当前页码默认选中高亮状态 2.页码少于等于1,则“上一页”为不可点击状态 3.页码大于等于最大页码,则“下一页”为不可点击状态 4.页码输

AngularJS -- Bootstrap(启动器)

Bootstrap(初始化) 这章介绍了Angular的初始化过程,以及如何在必要的时候,手动进行初始化Angular. Angular <script> 标签 什么都不说,先来个例子. 这个例子展示了Angular推荐的如何继承Angular和自动初始化Angular. <!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> ... <script