Skip to content
This repository was archived by the owner on Oct 2, 2019. It is now read-only.

Add inForm attribute #1279

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add inForm attribute #1279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 105 additions & 0 deletions examples/demo-in-form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
<meta charset="utf-8">
<title>AngularJS ui-select</title>

<!--
IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
-->
<!--[if lt IE 9]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
<script>
document.createElement('ui-select');
document.createElement('ui-select-match');
document.createElement('ui-select-choices');
</script>
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular-sanitize.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">

<!-- ui-select files -->
<script src="../dist/select.js"></script>
<link rel="stylesheet" href="../dist/select.css">

<script src="demo.js"></script>

<!-- Select2 theme -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">

<!--
Selectize theme
Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less
-->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap2.css"> -->
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css"> -->

<style>
body {
padding: 15px;
}

.select2 > .select2-choice.ui-select-match {
/* Because of the inclusion of Bootstrap */
height: 29px;
}

.selectize-control > .selectize-dropdown {
top: 36px;
}
</style>
</head>

<body ng-controller="DemoCtrl">
<script src="demo.js"></script>

<button class="btn btn-default btn-xs" ng-click="enable()">Enable ui-select</button>
<button class="btn btn-default btn-xs" ng-click="disable()">Disable ui-select</button>
<button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button>

<h1>Form Demos</h1>

<p>Enter any field a press Enter Key. It will submit form when dropdown list is closed</p>

<form ng-submit="submitted=true">

<h3>Select2 theme</h3>
<p>Selected: {{person.selected}}</p>
<ui-select ng-disabled="submitted" in-form="true" ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
<ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="person.name | highlight: $select.search"></div>
<small>
email: {{person.email}}
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>

<hr>

<h1>Multi Selection Demos</h1>

<h3>Array of strings</h3>
<ui-select ng-disabled="submitted" in-form="true" multiple ng-model="multipleDemo.colors" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 300px;" title="Choose a color">
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
<ui-select-choices repeat="color in availableColors | filter:$select.search">
{{color}}
</ui-select-choices>
</ui-select>
<p>Selected: {{multipleDemo.colors}}</p>
<hr>

<button ng-show="submitted" type="button" ng-click="submitted=false">Unsubmit</button>
<button ng-hide="submitted">Submit</button>

<div style="height:500px"></div>
</form>

</body>
</html>
6 changes: 5 additions & 1 deletion src/uiSelectController.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -427,7 +427,7 @@ uis.controller('uiSelectCtrl',
case KEY.ENTER:
if(ctrl.open && (ctrl.tagging.isActivated || ctrl.activeIndex >= 0)){
ctrl.select(ctrl.items[ctrl.activeIndex]); // Make sure at least one dropdown item is highlighted before adding if not in tagging mode
} else {
} else if (!$scope.inForm) {
ctrl.activate(false, true); //In case its the search input in 'multiple' mode
}
break;
Expand All @@ -450,6 +450,10 @@ uis.controller('uiSelectCtrl',
// ctrl.close();
// }

if ($scope.inForm && key === KEY.ENTER && !ctrl.open) {
return; // allow submit in parent form
}

$scope.$apply(function() {

var tagged = false;
Expand Down
3 changes: 3 additions & 0 deletions src/uiSelectDirective.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@ uis.directive('uiSelect',
//Limit the number of selections allowed
$select.limit = (angular.isDefined(attrs.limit)) ? parseInt(attrs.limit, 10) : undefined;

//Do not open dropdown list and do not stop propagation to allow form submit if pressing Enter (only if dropdown list is closed)
scope.inForm = (angular.isDefined(attrs.inForm)) ? $parse(attrs.inForm)(scope) : true;

//Set reference to ngModel from uiSelectCtrl
$select.ngModel = ngModel;

Expand Down
2 changes: 1 addition & 1 deletion src/uiSelectSingleDirective.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ uis.directive('uiSelectSingle', ['$timeout','$compile', function($timeout, $comp
return;
}

if (e.which === KEY.TAB || KEY.isControl(e) || KEY.isFunctionKey(e) || e.which === KEY.ESC) {
if (e.which === KEY.TAB || KEY.isControl(e) || KEY.isFunctionKey(e) || e.which === KEY.ESC || (scope.inForm && e.which == KEY.ENTER)) {
return;
}

Expand Down