Angularjs指令学习1-下拉框

最新推荐文章于 2024-05-07 21:56:32 发布

原创最新推荐文章于 2024-05-07 21:56:32 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

AngularJs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用AngularJS创建一个自定义的下拉选择框，该选择框集成了国家标志、区号等信息，并提供了完整的代码示例。

学习了angularjs，开发项目中为了节省时间，没有专门学习指令。事后发现项目的下拉可以集成一下，就没事写了一个简单的。

index.html文件：

</pre><pre name="code" class="html"><!DOCTYPE html>
<html ng-app="myapp">
<head>
	<meta charset="utf-8"/>
	<title>angularjs 下拉框</title>
	<script src="../angular.js"></script>
	<script src="../jquery.js"></script>
	<script src="app.js"></script>
	<style type="text/css">
		ul,li,div{
			margin: 0;
			padding: 0;
		}
		.m-select {
			position: relative;
		}
		.u-select {
			width: 100px;
			border-right: 0;
			cursor: pointer;
			color: #647486;
			position: relative;
			cursor: pointer;
			height: 35px;
			font-size: 15px;
		}
		#select-country{
			position: absolute;
			width: 20px;
			top: 7px;
			left: 5px;
		}
		#phoneCode{
			position: absolute;
			top: 7px;
			left: 25px;
			width: 40px;
			height: 20px;
    		display: inline-block;
    		text-align: center;
		}
		#select-sub{
			width: 11px;
			position: absolute;
			top: 13px;
    		left: 65px;
		}
		#select-splie{
			position: absolute;
		    top: 8px;
		    left: 85px;
		    display: block;
		    height: 18px;
		    border-right: 1px solid #bdc3c7;
		}
		.u-select-ul{
			cursor: pointer;
			background: #FFF;
			overflow: hidden;
			width: 85px;
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
			box-shadow:0 0 10px #bdc3c7;
			position: absolute;
			top: 35px;
			padding: 0px;
		}
		.u-select-li{
			list-style-type: none;
			height: 23px;
			margin-top: 3px;
			padding-top: 5px;
			padding-bottom: 5px;
		}
		.u-select-li:hover{
			background: #eef3f5;
		}
		.select-country{
			width: 20px;
			height: 20px;
			margin-left: 5px;
			margin-right: 5px;
			box-shadow: 0 0 4px rgba(0,0,0,0.1);
		}
		label{
			cursor: pointer;
			position: relative;
			top: -7px;
		}
	</style>
</head>
<body>	
	<select-block/>
</body>
</html>

app.js文件：

var app = angular.module('myapp',[]);
app.directive('selectBlock',function (selectService) {
	return{
		restrict: 'AE',
		replace: true,
		scope:{},
		templateUrl: 'selectblock.html',
		link: function(scope, elem, attrs){
			scope.isShowCountry = false;
			scope.countrys = selectService.resources;
			scope.country = scope.countrys[0];
			scope.selectCountry = function(index){
				scope.country = scope.countrys[index];
				scope.isShowCountry = false;
			}
		}
	}
});
app.service('selectService', [function(){
	this.resources = {
        '0': {
            "country": '中国',
            "flag": 'img/china.png',
            "code": '+86'
        },
        '1': {
            "country": '加拿大',
            "flag": 'img/canada.png',
            "code": '+1'
        },
        '2': {
            "country": '法国',
            "flag": 'img/france.png',
            "code": '+33'
        },
        '3': {
            "country": '德国',
            "flag": 'img/germany.png',
            "code": '+49'
        },
        '4': {
            "country": '香港',
            "flag": 'img/hk.png',
            "code": '+852'
        },
        '5': {
            "country": '意大利',
            "flag": 'img/italy.png',
            "code": '+39'
        },
        '6': {
            "country": '日本',
            "flag": 'img/japan.png',
            "code": '+81'
        },
        '7': {
            "country": '韩国',
            "flag": 'img/korea.png',
            "code": '+82'
        },
        '8': {
            "country": '英国',
            "flag": 'img/UK.png',
            "code": '+44'
        },
        '9': {
            "country": '美国',
            "flag": 'img/USA.png',
            "code": '+1'
        },
        '10': {
            "country": '西班牙',
            "flag": 'img/apain.png',
            "code": '+34'
        }
    };
}])

selectblock.html文件：

<span style="font-size:10px;"><div class="m-select" ng-mouseleave="isShowCountry=false;">
	<div class="u-select" ng-click="isShowCountry = !isShowCountry;">
	  <img id="select-country" ng-src="{{country.flag}}" />
	  <label id="phoneCode">{{country.code}}</label>
	  <img id="select-sub" src="http://image.1yingli.cn/img/new/select-arrow1.png"></img>
	  <span id="select-splie"></span>
	</div>  
	<ul class="u-select-ul" ng-show="isShowCountry">
	  	<li class="u-select-li" ng-click="selectCountry($index);" ng-repeat="country in countrys">
	     	<img class="select-country" ng-src="{{country.flag}}"></img>
	     	<label>{{country.code}}</label>
	    </li>
	</ul>     
</div> </span><span style="font-size:18px;">
</span>

这是个简单的例子。