AngularJS用户选择器指令实例分析
更新时间：2016年11月04日 10:55:54 作者：自由港
这篇文章主要介绍了AngularJS用户选择器指令,结合实例形式分析了angular指令实现选择器功能的具体操作步骤与相关实现技巧,需要的朋友可以参考下
本文实例分析了AngularJS用户选择器指令。分享给大家供大家参考，具体如下：
在开发表单时，我们需要使用经常需要使用到用户选择器，用户的数据一般使用如下方式存储：
用户1,用户2,用户3
我们可以使用angular指令实现选择器。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="../assets/js/angular.min.js"></script>
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../assets/css/component.css">
<link rel="stylesheet" href="../assets/css/form.css">
<link rel="stylesheet" href="../assets/css/font-awesome.min.css">
<script src="../assets/js/angular.min.js"></script>
<script type="text/javascript">
var base=angular.module("directive",[]);
base.directive('htSelector', function() {
return {
restrict : 'AE',
templateUrl:'selector.html',
scope: {
name: '=name'
},
link: function(scope, element, attrs) {
var aryName=scope.name.split(",");
scope.names=aryName;
scope.remove=function(i){
aryName.splice(i,1);
};
scope.$watch(
"names",
function (newValue,oldValue) {
if(newValue!=oldValue){
scope.name=aryName.join(",");
}
},true
);
scope.selectUser=function(){
aryName.length = 0;
aryName.push("韩信");
}
}
}
});
var app=angular.module("app",["directive"]);
app.controller('ctrl', ['$scope',function($scope){
$scope.names='自由港,马云,刘强东';
$scope.getData=function(){
console.info($scope.names)
}
}])
</script>
</head>
<body ng-controller="ctrl">
<div ht-selector name="names"></div>
<button ng-click="getData()">获取数据</button>
</body>
</html>
模版URL
<div>
<span ng-repeat="item in names">
{{item}}<a class="btn btn-xs fa-remove" title="移除该项" ng-click="remove($index)"></a>
</span>
<a class="btn btn-sm btn-primary fa-search" ng-click="selectUser()">选择</a>
</div>
在指令中，使用了独立的scope，传入的数据为使用逗号分割的字符串，我们使用了数组进行操作。
这里的技巧是在字符串和数组之间进行转换。
这里使用了指令独立的scope，使用了watch 对数组进行操作，需要注意的是如果监控数组，需要使用深度监控。
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的。他们之间有什么不同呢？今天小编给大家分享AngularJS constant和value区别详解，需要的朋友参考下2017-02-02
Angular.js中上传指令ng-upload的基本使用教程
这篇文章主要给大家介绍了关于Angular.js中上传指令ng-upload的基本使用方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-07-07
本文主要介绍AngularJS 依赖注入,这里对依赖注入做了详细介绍讲解,并提供效果图和示例代码以便学习参考2016-07-07
依赖注入式AngularJS的重要特性之一，依赖注入简化了Angular解析模块/组件之间依赖的过程。下面这篇文章主要给大家介绍了关于Angular 4依赖注入基础的相关资料，文中介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-06-06
这篇文章主要介绍了Angular设置别名alias及打包命令的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
Angular统一注入器unified injector简化依赖关系管理
这篇文章主要为大家介绍了Angular统一注入器unified injector简化依赖关系管理的使用方法实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
分页是很多web应用都会用到的，本篇文章主要介绍了Angularjs实现分页和分页算法的示例代码，具有一定的参考价值，有兴趣的可以了解一下。2016-12-12
本文将要分析的是经常用到的路由中间件 -- koa-router，详细的介绍了koa-router概述和实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了Angular2 自定义表单验证器的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
最近在工作总遇到需要实现类似手风琴效果的需求,下面小编通过本文给大家分享angularjs巧用双向数据绑定实现手风琴效果,需要的朋友可以参考下2017-05-05
最新评论