Question

使用此multiple select box，用户可以选择多个选项。当用户完成并在选择框外单击时，我想要一个名为＆＃34; change（）＆＃34;的函数。被触发。

我尝试过更改并使用图书馆提供的options，但他们没有工作。有什么建议吗？

谢谢，马特

＆＃13;

'use strict';

var app = angular.module('myApp', ['angularjs-dropdown-multiselect']);

app.controller('AppCtrl', function ($scope) {
    $scope.example14model = [];
    $scope.example14settings = {
        scrollableHeight: '200px',
        scrollable: true,
        enableSearch: false,
      showCheckAll:false,
      showUncheckAll:false
    };
  
  	$scope.myEventListeners = {
	  onItemSelect: onItemSelect,
    onItemDeselect: onItemDeselect,
    onSelectAll: onSelectAll,
    onDeselectAll: onDeselectAll,
      onSelectionChanged:onSelectionChanged
	};
  
      $scope.change = function() {
       console.log("call function when user done making selections");
    };

	
	// MultiSelect Drop down select - Event
	function onItemSelect(property) {
    console.log('select > ' + property);
	}
	
	function onItemDeselect(property) {
    console.log('deselect : ' + property);
	}
	
	function onSelectAll() {
	  console.log('select all');
	}
	
	function onDeselectAll() {
	  console.log('deselect all');
	}
  function onSelectionChanged(){
    console.log('SelectionChanged');
  }
  
    $scope.example14data = [{
        "label": "Alabama",
            "id": "AL"
    }, {
        "label": "Alaska",
            "id": "AK"
    }, {
        "label": "American Samoa",
            "id": "AS"
    }, {
        "label": "Arizona",
            "id": "AZ"
    }];
    $scope.example2settings = {
        displayProp: 'id'
    };
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-dropdown-multiselect/2.0.0-beta.10/src/angularjs-dropdown-multiselect.js"></script>

<div ng-app="myApp" ng-controller="AppCtrl">
    <div ng-dropdown-multiselect="" ng-change="change()" ng-model="example14model" options="example14data"  selected-model="example14model" checkboxes="true" extra-settings="example14settings" translation-texts={buttonDefaultText:'SelectView'} events="myEventListeners"></div> <pre>Selected Model: {{example14model|json}}</pre>

</div>

＆＃13;

在这里添加一堆东西来清除错误。希望我能为这个例子提供更少的代码。

Answer 1

这个库实现了一个＆＃39; onChange＆＃39;事件。我使用的版本是一个旧的，没有使用＆＃39; onChange＆＃39;事件。更新代码并使用该事件。

Answer 2

使用内置ng-blur指令代替ng-change。当用户将另一个元素聚焦在页面上时，ngBlur将运行表达式（ng-blur docs）。

<div ng-dropdown-multiselect ng-blur="change()" ...> /div>

用户点击选择框时如何触发功能？

2 个答案: