Question

我已尝试过此链接中的代码 splice， AngularJS dropdown directive hide when clicking outside， http://plnkr.co/edit/ybYmHtFavHnN1oD8vsuw?p=preview。但没有帮助。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<div ng-app="app" ng-controller="tableCtrl">
  <div>
    <label>Search:</label>
    <input type="search" ng-model="search" placeholder="Enter to Search">
  </div>
  <div id="table1">
    <table cellpadding="0" border="0" cellspacing="0">
      <tr id="heading">
        <th>Roll NO:</th>
        <th>Student Name:</th>
        <th>University:</th>
      </tr>
      <tr class="color2" ng-class="student.color" ng-repeat="student in students | filter:search | filter:new_search">
        <td>{{student.Rollno}}
          <input type="checkbox" ng-model="checked[$index]">
        </td>
        <td>{{student.Name}}</td>
        <td>{{student.Uni}}
          <button ng-click="remove($index)">x</button>
        </td>
      </tr>
    </table>
    <div>
      <label>Rollno:</label>
      <input type="number" ng-model="new_rollno">
      <br>
      <label>Name:</label>
      <input type="text" ng-model="new_name">
      <br>
      <label>University:</label>
      <input type="text" ng-model="new_uni">
      <br>
      <button ng-click="save()">Save</button>
    </div>
    <div style="float: right; margin-right: 300px;margin-top: -200px;">


    </div>
  </div>
</div>

请为此建议更改。

Answer 1

我最后使用下面的代码解决了它。

<html>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
'use strict';

var app = angular.module('myApp', ['app.directives']);

app.controller('AppCtrl', function($scope){                     
    $scope.roles = [
          {"id": 1, "name": "Manager", "assignable": true},
          {"id": 2, "name": "Developer", "assignable": true},
          {"id": 3, "name": "Reporter", "assignable": true}
    ];

    $scope.member = {roles: []};
    $scope.selected_items = [];
});

var app_directives = angular.module('app.directives', []);

app_directives.directive('dropdownMultiselect', function($document){
   return {
       restrict: 'AE',
       scope:{           
            model: '=',
            options: '=',
            pre_selected: '=preSelected'
       },
       template: "<div class='btn-group' data-ng-class='{open: open}'>"+
        "<button class='btn btn-small'>Select</button>"+
                "<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()' ><span class='caret'></span></button>"+
                "<ul class='dropdown-menu' aria-labelledby='dropdownMenu' ng-show='open'>" + 
                    "<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i>  Check All</a></li>" +
                    "<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i>  Uncheck All</a></li>" +                    
                    "<li class='divider'></li>" +
                    "<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>" +                                        
                "</ul>" +
            "</div>" ,
            link: function(scope, elem, attr, ctrl) 
            {
                //console.log("in click");
              elem.bind('click', function(e) {
              console.log("in click");
                // this part keeps it from firing the click on the document.
                e.stopPropagation();
              });
              $document.bind('click', function() {
                // magic here.
                console.log("click in document");
                scope.$apply(attr.dropdownMulti);
                /*var myElement= document.getElementsByClassName('btn btn-small dropdown-toggle');
                angular.element(myElement).triggerHandler('click');*/
              })
            },
       controller: function($scope){

           $scope.openDropdown = function(){        
                    $scope.selected_items = [];
                    for(var i=0; i<$scope.pre_selected.length; i++){                        
                    $scope.selected_items.push($scope.pre_selected[i].id);
                    }                                        
            };

            $scope.selectAll = function () {
                $scope.model = _.pluck($scope.options, 'id');
                console.log($scope.model);
            };            
            $scope.deselectAll = function() {
                $scope.model=[];
                console.log($scope.model);
            };
            $scope.setSelectedItem = function(){
                var id = this.option.id;
                if (_.contains($scope.model, id)) {
                    $scope.model = _.without($scope.model, id);
                } else {
                    $scope.model.push(id);
                }
                console.log($scope.model);
                return false;
            };
            $scope.isChecked = function (id) {                 
                if (_.contains($scope.model, id)) {
                    return 'icon-ok pull-right';
                }
                return false;
            };                                 
       }
   } 
});
</script>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">    
    <dropdown-multiselect pre-selected="member.roles" model="selected_items" options="roles" is-active="isDropdownOpen()" dropdown-multi="open=false"></dropdown-multiselect>


    <pre>selected roles = {{selected_items | json}}</pre>
</div>
</body>
</html>

单击外部下拉列表时关闭多选下拉指令

1 个答案: