Last active
January 1, 2016 12:19
-
-
Save chenchiyuan/8143989 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html ng-app lang="zh-cn"> | |
<head> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
<meta charset="UTF-8"> | |
<link href="http://cdn.staticfile.org/twitter-bootstrap/3.0.0-rc2/css/bootstrap.min.css" rel="stylesheet" media="screen"> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script> | |
<script > | |
function SearchController($scope) { | |
$scope.hotels = [ | |
{name:'希尔顿酒店', selected:true}, | |
{name:'七天连锁', selected:false} | |
]; | |
$scope.commodities = [ | |
{"name": "一日游", selected:true}, | |
{"name": "二日游", selected:false} | |
]; | |
$scope.getUrl = function(){ | |
var base_url = "http://baidu.com"; | |
var hotels = []; | |
var commodities = []; | |
angular.forEach($scope.hotels, function(hotel){ | |
if(hotel.selected){ | |
hotels.push(hotel); | |
} | |
}); | |
if(typeof hotels !== 'undefined' && hotels.length > 0){ | |
return "http://baidu.com"; | |
}else{ | |
return "http://google.com"; | |
} | |
}; | |
} | |
</script> | |
<style type="text/css"> | |
.selected-true { | |
text-decoration: line-through; | |
color: grey; | |
} | |
.body { | |
margin-bottom: 60px; | |
} | |
.fixed-footer { | |
position: fixed; | |
bottom: 0; | |
width: 100%; | |
background-color: #3fbc48; | |
font-size: 1.2em; | |
text-align: center; | |
padding: 15px 0; | |
height: 60px; | |
} | |
.fixed-footer a { | |
text-decoration: none; | |
color: #fff; | |
} | |
a:link{ | |
text-decoration: none; | |
color: #fff; | |
} | |
a:hover{ | |
text-decoration: none; | |
color: #fff; | |
} | |
a:visited { | |
text-decoration: none; | |
} | |
.fixed-footer span { | |
display: block; | |
color: #fff; | |
font-size: 1.2em; | |
} | |
</style> | |
<script> | |
function submit(){ | |
hotel_scope = angular.element(document.getElementById('hotel-controller')).scope(); | |
console.log(hotel_scope.hotels); | |
alert(hotel_scope.hotels); | |
} | |
</script> | |
</head> | |
<body> | |
<div class="data-wrapper" ng-controller="SearchController" id="search-controller"> | |
<div class="products-wrapper container"> | |
<h3>酒店</h3> | |
<table class="table table-hover"> | |
<tr class="row"> | |
<td class="col-xs-6">酒店名</td> | |
<td class="col-xs-6">选中</td> | |
</tr> | |
<tr class="row" ng-class="{true:'success', false:''}[hotel.selected]" ng-repeat="hotel in hotels"> | |
<td class="col-xs-6">{{ hotel.name }}</td> | |
<td class="col-xs-6"><input type="checkbox" ng-model="hotel.selected"/></td> | |
</tr> | |
</table> | |
</div> | |
<div class="products-wrapper container"> | |
<h3>目的地产品</h3> | |
<table class="table table-hover"> | |
<tr class="row"> | |
<td class="col-xs-6">产品名</td> | |
<td class="col-xs-6">选中</td> | |
</tr> | |
<tr class="row" ng-class="{true:'success', false:''}[commodity.selected]" ng-repeat="commodity in commodities"> | |
<td class="col-xs-6">{{ commodity.name }}</td> | |
<td class="col-xs-6"><input type="checkbox" ng-model="commodity.selected"/></td> | |
</tr> | |
</table> | |
</div> | |
<div><a class="fixed-footer" id="submit-products" href="{{getUrl()}}"><span>提交</span></a></div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment