欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

AngularJS用户选择器指令实例分析

程序员文章站 2023-11-18 14:34:22
本文实例分析了angularjs用户选择器指令。分享给大家供大家参考，具体如下： 在开发表单时，我们需要使用经常需要使用到用户选择器，用户的数据一般使用如下方式存储：...

本文实例分析了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学习笔记（三）数据双向绑定的简单实例

下一篇： 两张显卡交火要怎么做?A卡、N卡

推荐阅读