Is it possible to select multiple values from angular ui bootstrap typeahead?
http://angular-ui.github.io/bootstrap/#/typeahead
Hi without changing the codebase probably not - you could try https://github.com/rayshan/ui-multiselect
I recently had the same requirement and was able to solve it by overriding the internal bootstrap implementation via an alternate popup-template. I created a new directive (multi-select-typeahead) to encapsulate the change.
The template uses an ng-init to pass the scope reference (of the typeahead popup directive) to the multi-select-typeahead directive. There the directive overrides the parent's scope. $scope.$parent in this case is the bootstrap typeahead directive itself. The custom directive provides a new implementation of select() which is called internally by angular bootstrap. The new implementation prevents the popup from closing and removes selected items from the list.
The alternate popup I provided is almost entirely the same as the default angular bootstrap typeahead template "uib/template/typeahead/typeahead-popup.html". The only modification was the addition of the ng-init which passes its scope to the multi-select-typeahead directive.
I'm sure if you are clever enough you could render the angular bootstrap default template by reference and inject the ng-init part, removing the duplicated bootstrap code. This would make the solution a bit more resilient to future angular bootstrap changes. That being said, the solution is already quite a hack and is prone to breaking in future major releases.
Hope this is useful to someone!
angular.module('typeahead.demo', [
'ngAnimate',
'ngSanitize',
'ui.bootstrap'
]);
angular
.module('typeahead.demo')
.controller('TypeaheadDemo', TypeaheadDemo);
function TypeaheadDemo($scope) {
$scope.addItem = addItem;
$scope.itemApi = itemApi;
$scope.items = [];
function addItem(item) {
$scope.items.push(item);
}
function itemApi() {
return [
{ name: 'apple' },
{ name: 'orange' },
{ name: 'grape' }
];
}
}
angular
.module('typeahead.demo')
.directive('multiSelectTypeahead', multiSelectTypeahead);
function multiSelectTypeahead() {
return {
templateUrl: 'multi-select-typeahead.html',
scope: {
searchApi: '&',
displayNameField: '#',
onSelect: '&',
inputPlaceholder: '#?'
},
link: function ($scope) {
var uibTypeaheadScope;
$scope.initializeScope = initializeScope;
$scope.$watch('isOpen', function (newValue) {
if (!newValue) {
$scope.searchTerm = '';
}
});
function initializeScope(typeaheadPopupScope) {
uibTypeaheadScope = typeaheadPopupScope.$parent;
uibTypeaheadScope.select = selectItem;
}
function selectItem(index, event) {
var selectedItem = uibTypeaheadScope.matches[index].model;
event.stopPropagation();
if (event.type === 'click') {
event.target.blur();
}
uibTypeaheadScope.matches.splice(index, 1);
$scope.onSelect({ item: selectedItem });
}
}
};
}
<!doctype html>
<html ng-app="typeahead.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<script type="text/ng-template" id="typeahead-search-results.html">
<ul ng-init="$parent.$parent.initializeScope(this)"
class="dropdown-menu"
ng-show="isOpen() && !moveInProgress"
ng-style="{ top: position().top + 'px', left: position().left + 'px' }"
role="listbox"
aria-hidden="{{ !isOpen() }}">
<li class="uib-typeahead-match"
ng-repeat="match in matches track by $index"
ng-class="{ active: isActive($index) }"
ng-mouseenter="selectActive($index)"
ng-click="selectMatch($index, $event)"
role="option"
id="{{ ::match.id }}">
<div uib-typeahead-match
index="$index"
match="match"
query="query"
template-url="templateUrl"></div>
</li>
</ul>
</script>
<script type="text/ng-template" id="multi-select-typeahead.html">
<input type="text"
placeholder="{{::inputPlaceholder}}"
ng-model="searchTerm"
ng-model-options="{debounce: 500}"
uib-typeahead="result as result[displayNameField] for result in searchApi({ searchText: $viewValue })"
typeahead-is-open="isOpen"
class="form-control"
typeahead-popup-template-url="typeahead-search-results.html" />
</script>
<body>
<div ng-controller="TypeaheadDemo" style="padding-top: 15px;">
<multi-select-typeahead class="col-xs-6"
search-api="itemApi(searchText)"
display-name-field="name"
on-select="addItem(item)"
input-placeholder="Search Items...">
</multi-select-typeahead>
<div class="col-xs-6">
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in items">
{{ item.name }}
</li>
</ul>
</div>
</div>
</body>
</html>
Related
I have a datapicker of jqueryUI:
<div class="span4">
<label>Start Date; </label>
<input type="text" name="sDate" id="datepicker1" ng-model="item.date.sDate" class="ng-pristine ng-valid hasDatepicker">
<label>End Date; </label>
<input type="text" name="eDate" id="datepicker2" ng-model="item.date.eDate" class="ng-pristine ng-valid hasDatepicker">
<br> <br>
<button ng-click="add()" type="submit" class="btn btn-success">Next</button>
The datepicker is working fine, but when i click Next button which trigger the add function, I cannot get item.date.eDate value...
I've just been trying the same thing, and found that I didn't actually need to use a directive, just this code...
$.datepicker.setDefaults({
// When a date is selected from the picker
onSelect: function(newValue) {
if (window.angular && angular.element)
// Update the angular model
angular.element(this).controller("ngModel").$setViewValue(newValue);
}
});
Just place it prior to your .datepicker() initialisation code.
AngularJS and jQuery don't work too well together. You need to use a directive. Here's a quick sample app version I created for you:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script>
function putObject(path, object, value) {
var modelPath = path.split(".");
function fill(object, elements, depth, value) {
var hasNext = ((depth + 1) < elements.length);
if(depth < elements.length && hasNext) {
if(!object.hasOwnProperty(modelPath[depth])) {
object[modelPath[depth]] = {};
}
fill(object[modelPath[depth]], elements, ++depth, value);
} else {
object[modelPath[depth]] = value;
}
}
fill(object, modelPath, 0, value);
}
var directives = angular.module('myApp', []);
directives.directive('datepicker', function() {
return function(scope, element, attrs) {
element.datepicker({
inline: true,
dateFormat: 'dd.mm.yy',
onSelect: function(dateText) {
var modelPath = $(this).attr('ng-model');
putObject(modelPath, scope, dateText);
scope.$apply();
}
});
}
});
function myCtrl($scope) {
$scope.item = ""
$scope.add = function() {
$scope.$apply()
alert($scope.item)
}
}
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
{{item}}
<p>Date: <input type="text" datepicker id="datepicker" ng-model="item" /></p>
<button ng-click="add()" type="submit" class="btn btn-success">Next</button>
<br />
</div>
</body>
</html>
Check out http://www.grobmeier.de/angular-js-binding-to-jquery-ui-datepicker-example-07092012.html for a a more thorough explanation.
just need to replace this element.datepicker({ to $(element).datepicker({
directives.directive('datepicker', function() {
return function(scope, element, attrs) {
$(element).datepicker({
inline: true,
dateFormat: 'dd.mm.yy',
onSelect: function(dateText) {
var modelPath = $(this).attr('ng-model');
putObject(modelPath, scope, dateText);
scope.$apply();
}
});
}
});
Actually turns out you don't have to make any inline directive or play around with the $.datepicker.
Only helpful i came up with was to get the value of datepicker element not by the ng-model directive.
suppose you have 3 inputs, first name, last name and date of birth. the date of birth input contains the jquery ui datepicker.
get the value of first name and last name input by ng-model directive< BUT to get the value of date of birth, just use jquery .val() function.
I have a below custom directive in angularjs which uses model thats gets updated from server,
I have added a watch listener to watch the changes of that model,
var linkFn;
linkFn = function(scope, element, attrs) {
scope.$watch('$parent.photogallery', function(newValue, oldValue) {
if(angular.isUndefined(newValue)) {
return;
}
var $container = element;
alert($container.element);
$container.imagesLoaded(function() {
$container.masonry({
itemSelector : '.box'
});
});
});
};
return {
templateUrl:'templates/Photos_Masonry.htm',
replace: false,
transclude:true,
scope: {
photogallery: '=photoGallery',
},
restrict: 'A',
link: linkFn
However, when i debug in my watch directive, i still see that expressions in templates are still unresolved.i.e. photo.label, ng-src all are still unresolved. AFIK, $digest would be called only after $eval. Is this intended behavior?
My jQuery calls are not working due to this? Is there any other event where i get the result element with evaluated expressions?
Here is my template, which has ng-repeat in it,
<div id="container" class="clearfix">
<div class="box col2" ng-repeat="photo in photogallery">
<a ng-href="#/viewphotos?id={{photo.uniqueid}}&&galleryid={{galleryid}}"
title="{{photo.label}}"><img
ng-src="{{photo.thumbnail_url}}" alt="Stanley" class="fade_spot" /></a>
<h3>
<span style="border-bottom: 1px solid black;font-weight:normal;font-size:14px;">{{galleryname}}</span>
</h3>
<h3>
<span style="color:#20ACB8;font-weight:normal;font-size:17px;">{{photo.seasonname}}</span>
</h3>
</div>
</div>
photogallery is initialized in parent controller,
function MyCtrlCampaign($scope, srvgallery, mygallery) {
$scope.updatedata = function() {
$scope.photogallery = srvgallery.getphotos($routeParams);
};
$scope.getphotos = function() {
srvgallery.photos().success(function(data) {
$scope.updatedata();
}).error(function(data) {
});
};
Directive is used in below way,
<div masonry photo-gallery="photogallery" >
</div>
Kindly let me know your views on this.
Looks like this has been resolved in your Github issue (posted for the convenience of others).
I like to add autocomplete feature for my jquery mobile page on a text box such that when user enters it should show the results in listview format. The code below shows the results but not in the listview format. Can someone point out how to fix it. Thanks.
<!DOCTYPE HTML>
<html>
<head>
<title>Finder</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style>
input{text-transform:uppercase;}
</style>
<script>
$(document).ready(function() {
$( "#firstinputbox" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ziplocator.cloudfoundry.com/rest/startsWithCity/",
dataType: "json",
data: {
maxRows: 10,
startsWith: request.term
},
success: function(data) {
response( $.map( data.zipcodes, function( item ) {
var listItem = ' <li class="ui-btn ui-btn-icon-right ui-li "><div class="ui-btn-inner ui-li"><div class="ui-btn-text">' + item.zipcodeId + '</div><span class="ui-icon ui-icon-arrow-r"></span></div></li>';
$(listItem).appendTo("#suggestions");
return {
label: item.cityName + ", " +item.zipcodeId + ", " + item.state,
value: item.cityName
}
}));
}
});
},
minLength: 1,
open: function() {
},
close: function() {
$('ul li').remove();
//should attach the value to the text box
}
});
});
</script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" id="inputdialog">
<div data-role="header">
<h1>Enter Criteria here</h1>
</div>
<div data-role="content">
<input type="text" id="firstinputbox" placeholder="Enter here"/>
<ul id="suggestions" data-role="listview" data-inset="true"></ul>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
You need to call the listview() function on your content after inserting the new content:
$('#suggestions').listview();
See Elijah Manor's explanation for the details.
Try calling the listview refresh method in your ajax success function.
$('#suggestions').listview('refresh');
try this one
In <li> tag remove class..... class="ui-btn ui-btn-icon-right ui-li "
Then it shows results in list view formats
All,
I have nested JQuery UI tabs. I want to implement a reloadTab functionality for a nested tab. Currently the following code has static fragments for nested tabs, but eventually they will have urls, so the tabs can behave as ajax tabs. How can I achieve the reloadTab functionality?
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#tabContainer').tabs({ selected: 0 });
$('#fragment-1').tabs({ selected: 1 });
});
function reloadTab(tabindex)
{
var smalltabs = $('#fragment-1').tabs({cache:false, spinner:'',selected:0});
$('#tabContainer').tabs('load', smalltabs.tabs('option','selected'));
$('#fragment-1').tabs('load', tabindex);
}
</script>
</head>
<body>
<div id="tabContainer">
<ul>
<li><span>TAB1</span></li>
<li><span>TAB2</span></li>
<li><span>TAB3</span></li>
</ul>
<div id="fragment-1">
<ul class="innerNav" >
<li><span>INNERTAB1</span></li>
<li><span>INNERTAB2</span></li>
</ul>
<div id="fragment-1a" class="innerFragment">Content of inner tab 1</div>
<div id="fragment-1b" class="innerFragment">Content of inner tab 2
<br>Reload tab content</div>
</div>
<div id="fragment-2"></div>
<div id="fragment-3"></div>
</div>
</body>
</html>
Thanks
From the docs:
var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0
EDIT
I copied your file, and made the following changes:
Change the reload link to look like this:
href="#" id="reload"
(markdown keeps converting my anchor tag to a link)
Change the jquery to this:
$(function() {
$('#tabContainer').tabs({ selected: 0 });
$('#fragment-1').tabs({ selected: 0 });
$('#reload').click(function(){
var $tabs = $('#fragment-1').tabs();
reloadTab($tabs.tabs('option', 'selected'));
});
});
function reloadTab(tabindex) {
//alert(tabindex); //un-comment for proof.
var smalltabs = $('#fragment-1').tabs({cache:false, spinner:'',selected:0});
$('#tabContainer').tabs('load', smalltabs.tabs('option','selected'));
$('#fragment-1').tabs('load', tabindex);
}
So I am pretty new to JQuery and just spent 5 hours getting this working. If anyone has a better approach please I would love to hear.
That is my basic question how can it be done cleaner, more streamline?
What I did was used the minitabs plugin and what the code below will do is toggle custom tabs back and forth. I needed a way to have the one tab blue and the other gray depending what tab I was on. What I hit against was tab1 would stay blue even when I clicked on tab2, just was funky until this fixed it. As you can see it's not the cleanest approach but it works. I am sure if you want to try this out the minitab plugin can be had here.
http://minitabs.googlecode.com/files/jquery.minitabs.js
JQuery:
$(document).ready(function(){
$("#tabs").minitabs('slow', 'fade');
$("#tab1").click(function()
{
var $this = $(this);
if( $this.is('.removed') )
{
$this.removeClass('removed');
$this.addClass('selected');
$('#tab2').removeClass('selected');
$("#tab2").addClass('removed');
} else {
$('#tab2').removeClass('selected');
}
return false;
});
$("#tab2").click(function()
{
var $this = $(this);
if( $this.is('.removed') )
{
$this.removeClass('removed');
$this.addClass('selected');
$("#tab1").removeClass('selected');
$("#tab1").addClass('removed');
} else {
$('#tab1').removeClass('selected');
}
return false;
});
});
Body:
<div id="tabs">
<ul>
<li>tab-l</li>
<li>tab-r</li>
</ul>
<div id="quick-links">
<ul>
<li>Look at me getting myself all in a frenzy!</li>
</ul>
</div>
<div id="newsletter-link">
Sometimes it's would be nice if they reported the fun news!
</div>
</div>
I looked at this briefly, and didn't see any problems with this less-complex setup which takes advantage of minitabs automatically applying the class "current" to the currently selected tab:
<head>
<style type="text/css">
.tabs a {
background: grey;
}
.tabs a.current {
background: blue;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").minitabs('slow', 'fade');
});
</script>
</head>
<body>
<div id="tabs">
<ul class="tabs">
<li>tab-l</li>
<li>tab-r</li>
</ul>
<div id="quick-links">
<ul>
<li>Look at me getting myself all in a frenzy!</li>
</ul>
</div>
<div id="newsletter-link">
Sometimes it's would be nice if they reported the fun news!
</div>
</div>
</body>
For me that handles the case you describe perfectly.