집 >웹 프론트엔드 >JS 튜토리얼 >AngularJS 사용자 선택기 지시문 예시 분석

AngularJS 사용자 선택기 지시문 예시 분석

高洛峰원래의: 2016-12-07 15:59:341075검색

이 기사에서는 예제를 통해 AngularJS 사용자 선택기 지시어를 분석합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

양식을 개발할 때 사용자 선택기를 사용해야 하는 경우가 많습니다. 사용자 데이터는 일반적으로 다음과 같은 방식으로 저장됩니다.

사용자 1, 사용자 2, 사용자 3

각도 지시문을 사용하여 선택기를 구현할 수 있습니다.

<!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(&#39;htSelector&#39;, function() {
      return {
        restrict : &#39;AE&#39;,
        templateUrl:&#39;selector.html&#39;,
        scope: {
          name: &#39;=name&#39;
        },
        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(&#39;ctrl&#39;, [&#39;$scope&#39;,function($scope){
      $scope.names=&#39;自由港,马云,刘强东&#39;;
      $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>

명령어에는 독립적인 범위가 사용되며 전달됩니다. 데이터는 쉼표로 구분된 문자열이며, 연산을 위해 배열을 사용합니다.

여기서 비결은 문자열과 배열 사이를 변환하는 것입니다.

여기에서는 명령 독립적 범위가 사용되며, watch는 어레이를 작동하는 데 사용됩니다. 어레이를 모니터링하는 경우 심층 모니터링을 사용해야 합니다.

성명：

이전 기사：JS로 객체를 생성하는 방법의 예다음 기사：JS로 객체를 생성하는 방법의 예

AngularJS 사용자 선택기 지시문 예시 분석

관련 기사