xn-directive-location
Version:
address directive
231 lines (151 loc) • 7.97 kB
HTML
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
<link href="../spm_modules/bootstrap-css/1.0.0/bootstrap.css" rel="stylesheet">
<link href="../spm_modules/xn-icon-common/1.0.5/iconfont.css" rel="stylesheet">
<link href="../demo/base.css" rel="stylesheet">
<link href="../directive/style.css" rel="stylesheet">
<script type="text/javascript" src="../spm_modules/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript" src="../spm_modules/angular/1.3.9/angular.js"></script>
<script type="text/javascript" src="../spm_modules/xn-underscore/1.0.0/underscore.js"></script>
<script type="text/javascript" src="../spm_modules/angular-ui/1.0.0/bootstraptpls.js"></script>
<script type="text/javascript" src="../spm_modules/xn-directive-form/1.0.1/directive/forms.js"></script>
<script type="text/javascript" src="../spm_modules/xn-service-common/1.0.0/service/commons.js"></script>
<script type="text/javascript" src="../directive/locations.js"></script>
<style>
.xn-province-city-box{
border: 1px solid #dcdcdc;
background: #fff;
border-radius: 4px ;
}
.xn-input-line{
margin-bottom: 15px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=RZakDY4AilwGcwGTICH6faU8BwHy8u39"></script>
</head>
<body ng-controller="MyController">
<div class="xn-width clearfix auto" style="width:1000px;">
<div style="width:400px;">
<!--省市区街道-->
<h2>省市区街道</h2>
{{locationTown}}
<div xn-location-town ng-model="locationTown" ></div>
<div style="margin-top:50px;"></div>
<div>地址指令</div>
<div >{{address}}</div>
<div xn-location ng-model="address" data-location-id="{{location.id}}" if-country='false' enabled-map='true' ></div>
<!--异步调用-->
<h3>异步调用</h3>
{{requestaddress}}
<div xn-request-location ng-model="requestaddress" old-location="oldLocation"></div>
<!---地址组件-->
<h3 >地址组件</h3>
<div>{{location}}</div>
<!-- <div xn-location ng-model="location" if-country='false' enabled-map='true'></div>-->
<div>省份多选</div>
{{selectProvinceId}}
<div xn-multiple-province class="xn-province-city-box" ng-model="selectProvinceId" name="打开" data-province-id-list="provinceIdList"></div>
<button ng-click="doSave()" style="margin-top:20px;" >保存</button>
<div style="margin-top:50px;">省份多选下拉形式</div>
<div>{{resultId}}</div>
<div xn-multiple-select-location type="text" select-data="sourceList" ng-model="resultId" name="result"></div>
<button ng-click="doSave1()" style="margin-top:20px;" >保存</button>
<div>单个城市指令</div>
<div xn-location-city ng-model="cardCity" data-city-id="{{employee.cityId}}"></div>
<div>多选框</div>
<div xn-location-city-list ng-model="city" data-city-id-list="cityIdList"></div>
<div>物流多选</div>
{{selectCityId}}
<div xn-province-city class="xn-province-city-box" ng-model="selectCityId" name="打开" data-city-id-list="cityIdList"></div>
<div>物流查看</div>{{selectCity.idList}}
<div xn-province-city-view class="xn-province-city-box" data-city-id-list="cityIdViewList"></div>
<div>物流多选到区</div>
{{selectDistrictId}}
<div xn-province-city-district class="xn-province-city-box" ng-model="selectDistrictId" name="打开" data-district-id-list="districtIdList"></div>
<ul style="padding: 100px">
<li ng-repeat="item in demo">{{item.val}}
<div xn-province-city-district class="xn-province-city-box" ng-model="item.districtIdList11" name="打开" data-district-id-list="item.districtIdList"></div>
<!-- <div xn-province-city-district-view class="xn-province-city-box" data-district-id-list="item.districtIdList"></div>-->
</li>
</ul>
<div ng-click="add()">增加一个</div>
<div>物流多选到区 查看</div>
{{districtIdList}}
<div xn-province-city-district-view class="xn-province-city-box" data-district-id-list="districtIdList"></div>
<h3>省市区选择指令（ 备注。城市名称不是必填，但是id为必填）</h3>
<h4>用法：</h4>
1. $scope.locationDistrict 里可以负值：{"provinceId":340000,"cityId":340400,"districtId":340404,"provinceName":"安徽省","cityName":"淮南市","districtName":"谢家集区"};
//设置默认数据时候。城市名称不是必填，但是id为必填
{{locationDistrict}}
<div xn-location-district ng-model="locationDistrict" placeholder="说明"></div>
</div>
<div class="" style="margin-bottom: 150px"></div>
</div>
</body>
<script type="text/javascript">
var xnConfig={
myUrl: "http://my-plat.xiniunet.com/"
};
var app=angular.module("myApp", ["ui.bootstrap","xn.service.common","xn.directive.location"]);
app.value("xnConfig",xnConfig);
app.controller("MyController", ["$scope","$timeout", function($scope,$timeout){
$timeout(function(){
$scope.demo=[
{key:1,val:"第一个",
districtIdList:[130102,230203]},
{key:1,val:"第一个",
districtIdList:[130102,130103,130104]
},
{key:1,val:"第一个",
districtIdList:[130102]
}
];
$scope.add=function(){
$scope.demo.push( {key:1,val:"第一个",
districtIdList:[130102,230203]})
};
$scope.cityIdList=[110100,130100,130200,130300,130400,130500,130600,130700,130800,130900,131000,131100,320300];
$scope.provinceIdList=[110000,150000,210000,120000];
$scope.cityIdViewList=[110100,130100,411400,411500,411600,411700,419000];
$scope.districtIdList=[130102,130103,131127,131128,131181,131182,230281];
$scope.locationDistrict={
"provinceId":110000,
"cityId":110100,
"districtId":110102,
"provinceName":"北京市",
"cityName":"北京市",
"districtName":"西城区"};
$scope.locationTown={
"provinceId":320000,
"cityId":320500,
"districtId":320508,
"provinceName":"江苏省",
"cityName":"苏州市",
"districtName":"姑苏区"
}
$scope.location={
id:'532120821632995329'
}
$scope.oldLocation={"countryId":"86","countryIdName":"中国","provinceId":"110000","provinceName":"北京市"};
},1000);
//备注。城市名称不是必填，但是id为必填
$scope.doSave=function(){
var aaa= angular.copy($scope.selectCityId);
var bbb= angular.copy($scope.selectProvinceId);
// console.log(aaa);
console.log(bbb);
};
$scope.doSave1=function(){
var q= angular.copy($scope.resultId);
alert(q);
};
$scope.sourceList = [];
$scope.result = [];
$scope.sourceList=[110000,150000,210000];
$scope.locationDistrict={
}
}]);
</script>
</html>