随笔 - 441 文章 - 4 评论 - 84 阅读 - 109万

ANGULAR 开发用户选择器指令

在开发表单时，我们需要使用经常需要使用到用户选择器，用户的数据一般使用如下方式存储：

用户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>