angular js 球星
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Title</title> | |
<style> | |
table{ | |
border-collapse: collapse; | |
} | |
</style> | |
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> | |
<script> | |
var myapp=angular.module("myapp",[]); | |
myapp.controller("myCtrl",function($scope){ | |
$scope.users=[ | |
{ | |
'url':"images/1.png", | |
'name':"Westbrook", | |
'wz':"得分后卫(SG)", | |
"age":24, | |
"qd":"雷霆", | |
"page":1900 | |
}, | |
{ | |
'url':"images/2.png", | |
'name':"James", | |
'wz':"大前锋(PF)", | |
"age":23, | |
"qd":"骑士", | |
"page":1900 | |
}, | |
{ | |
'url':"images/3.png", | |
'name':"Curry", | |
'wz':"得分后卫(SG)", | |
"age":30, | |
"qd":"勇士", | |
"page":1800 | |
}, | |
{ | |
'url':"images/4.png", | |
'name':"Harden", | |
'wz':"小前锋(SG)", | |
"age":13, | |
"qd":"火箭", | |
"page":1800 | |
}, | |
{ | |
'url':"images/5.png", | |
'name':"Durant", | |
'wz':"得分后卫(SG)", | |
"age":35, | |
"qd":"勇士", | |
"page":1712 | |
} | |
]; | |
//年龄范围过滤 | |
$scope.ageSize="--请选择--"; | |
$scope.fun=function(){ | |
console.log($scope.ageSize); | |
}; | |
$scope.ageFilter=function(item){ | |
//console.log(item.age); | |
if($scope.ageSize!="--请选择--"){ | |
var ageSize=$scope.ageSize; | |
var ageArr=ageSize.split("-"); | |
var min=ageArr[0]; | |
var max=ageArr[1]; | |
var age=item.age; | |
if(age>max||age<min){ | |
return false | |
}else{ | |
return true; | |
} | |
}else{ | |
return true; | |
} | |
}; | |
$scope.add=function(user){ | |
console.log(user); | |
user.page++; | |
}; | |
$scope.addNew=function(){ | |
$scope.users.push({'url':"images/5.png",'name':$scope.name,'wz':$scope.wz,"age":$scope.age,"qd":$scope.team,"page":0}) | |
}; | |
}) | |
</script> | |
</head> | |
<body ng-app="myapp" ng-controller="myCtrl"> | |
<div> | |
<h2>添加新球员</h2> | |
<div>姓名:<input type="text" ng-model="name"></div> | |
<div>位置:<input type="text" ng-model="wz"></div> | |
<div>年龄:<input type="text" ng-model="age"></div> | |
<div>球队:<input type="text" ng-model="team"></div> | |
<button ng-click="addNew()">添加新球员</button> | |
</div> | |
<h3>用户信息表</h3> | |
<div> | |
<input placeholder="用户名查询" size="10" /> | |
<!--<input ng-model="ageSize" placeholder="年龄查询(a-b)" size="10"/>--> | |
年龄: | |
<select ng-model="ageSize"> | |
<option>--请选择--</option> | |
<option>11-20</option> | |
<option>21-30</option> | |
<option>31-40</option> | |
<option>41-50</option> | |
<option>51-60</option> | |
</select> | |
</div> | |
<div> | |
<table border="1" cellpadding="10"> | |
<thead> | |
<tr> | |
<th>球员</th> | |
<th>姓名</th> | |
<th>位置</th> | |
<th>年龄</th> | |
<th>球队</th> | |
<th>得票数</th> | |
<th>操作</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr ng-repeat="user in users|filter:ageFilter" > | |
<td><img src="{{user.url}}"></td> | |
<td>{{user.name}}</td> | |
<td>{{user.wz }}</td> | |
<td>{{user.age}}</td> | |
<td>{{user.qd }}</td> | |
<td>{{user.page}}</td> | |
<td><button ng-click="add(user)">投票</button></td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
</body> | |
</html> |
angular js 球星的更多相关文章
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe
angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...
- (翻译)Angular.js为什么如此火呢?
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- angular.js写法不规范导致错误
以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...
- Angular.js实现折叠按钮的经典指令.
var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...
- Angular.js通过bootstrap实现经典的表单提交
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...
- python , angular js 学习记录【1】
1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...
- Angular JS 学习之路由
1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...
- Angular JS 学习之Bootstrap
1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...
随机推荐
- 三、Scrapy中选择器用法
官方示例源码<html> <head> <base href='http://example.com/' /> <title>Example web ...
- PHP排序算法之快速排序
原理:找到当前数组中的任意一个元素(一般选择第一个元素),作为标准,新建两个空数组left.rignt,遍历整个数组元素,如果遍历到的元素比当前的元素小就放到数组left,比当前的元素大放到rignt ...
- 53. Maximum Subarray(动态规划)
Find the contiguous subarray within an array (containing at least one number) which has the largest ...
- Spring Boot学习总结(4)——使用Springloaded进行热部署
我在开发的时候,总是会及时对自己的程序进行测试,总是频繁的重启web server,容器不烦我们都觉得烦了. dependencys目录下增加: <dependency> <grou ...
- java后台处理解析json字符串的两种方式
简单说一下背景 上次后端通过模拟http请求百度地图接口,得到的是一个json字符串,而我只需要其中的某个key对应的value. 当时我是通过截取字符串取的,后来觉得不太合理,今天整理出了两种处理解 ...
- 洛谷P3375【模板】KMP字符串匹配
题目描述 如题,给出两个字符串s1和s2,其中s2为s1的子串,求出s2在s1中所有出现的位置. 为了减少骗分的情况,接下来还要输出子串的前缀数组next. (如果你不知道这是什么意思也不要问,去百度 ...
- noip模拟赛 c
分析:一道比较难的爆搜题.首先要把9个块的信息存下来,记录每个块上下左右位置的颜色,然后记录每一排每一列能否操作,之后就是bfs了.在bfs的时候用一个数记录状态,第i位表示原来的第i个块现在在哪个位 ...
- Office 2003的卸载 与 Office 2013 的安装
一.Office 2003的卸载 软件:卸载Office2003.msi 运行该软件,等待几分钟即可, 二.Office 2013 的安装 1.Office Professional Plus 201 ...
- P1294 高手去散步 洛谷
https://www.luogu.org/problem/show?pid=1294#sub 题目背景 高手最近谈恋爱了.不过是单相思.“即使是单相思,也是完整的爱情”,高手从未放弃对它的追求.今天 ...
- CF #316 DIV2 D题
D. Tree Requests time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...