I am working with AngularUI Datepicker.I have seprate partial views each having ng-repeat .There I am using AngularUI-Bootstrap-Datepickers and it is making page load really slow.
I followed this answer:
Many UI-Bootstrap-Datepickers on page loads very slowly - can I use a single instance and move element?
But I got few other issues.In this approach we are using separate ng-if to switch from span to textbox. But switching between them is taking considerable amount of time which make it visible to user that we are playing with textboxes.(check Image
http://i.stack.imgur.com/YxZXQ.png )
I also followed this : https://github.com/angular-ui/bootstrap/pull/3666/commits
But I am unable to integrate the changes and successfully run the datepicker.
Is there any reliable solution to this issue?
Many UI-Bootstrap-Datepickers on page loads very slowly - can I use a single instance and move element?
<p class="input-group">
<span class="form-control" ng-if="!date.opened1">{{date.data1|date:format}}</span>
<input type="text" class="form-control"
ng-if="date.opened1" datepicker-popup="{{format}}" ng-model="date.data1"
is-open="date.opened1"
datepicker-options="dateOptions"
close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, date,1)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
code
$scope.open = function($event,date,i) {
$event.preventDefault();
$event.stopPropagation();
date['opened'+i] = !date['opened'+i];
};
Plunkr link
Related
In this plunk I have an Angular UI date picker with an error message that is displayed when the date is invalid. Problem is that the error message is shown below the date instead of the same line. How to fix this?
HTML
<form name="form1" ng-submit="validate(form1)" novalidate>
<p class="input-group" style="width:160px;margin-bottom:0px;">
<input type="text" class="form-control" ng-model="dtFrom"
is-open="config1.opened" uib-datepicker-popup="MM-dd-yyyy"
close-text="Close" name="dtFrom" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
<div style="background-color:red;color:white;width:150px"
ng-show="!form1.dtFrom.$valid">Invalid Date</div>
</form>
Javascript
var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
app.controller('ctl', function ($scope) {
$scope.dtFrom = new Date ();
$scope.config1 = {};
$scope.config1.opened = false;
$scope.open1 = function(event){
event.preventDefault();
event.stopPropagation();
$scope.config1.opened = true;
};
});
You can add class list-inline in it.
Here is plnkr
http://plnkr.co/edit/23CxCMDRK6DBiW115K7T?p=preview
The reason you are seeing this misalignment is because you are using bootstrap classes but are not correctly applying them to all the corresponding elements. When you use an input-group as you've applied to the <p> element, you are using a specific bootstrap class that adds styling to the components, like display:table. To have a correct behavior for the whole form, you need to keep using these classes on sibling elements. Namely input-group and form-control. Using these you will notice that its better aligned to its neighbor in both position and height. Additionally its best to wrap all these components in a valid row and column classes for parent elements. I've added an updated version of your plnkr showing how these changes behave:
plnkr
I am trying to make a search function which works if I put in the query params into my URL directly but I don't know how to make it work so that it picks it up from the search box and executes it. I have used ng-model to map the text itself to the controller which works but the execution isn't working.
The navbar form:
<form ng-submit="doSearch()" class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="col-md-offset-4 input-group" style="display:table;">
<input ng-model="search.text" class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
<span class="input-group-addon" style="width:1%;">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</div>
By the way, my doSearch() function works just fine when I run it manually and so is the search itself. I have also validated that search.text comes through. I guess what I am asking is how do I make the icon (glyphicon-search) execute ng-submit="doSearch()" when the user clicks on it or presses enter.
Sorry if this is very obvious. I was always more on the backend side of things so am sorta new to HTML and Angular.
Thanks
You could place the icon inside a <button> element instead of <span>, tweak a bit of css to integrate it to the form field.
In regards to trigger search on enter, with jQuery something like this could be used:
$('input').keypress(function (e) {
var key = e.which;
if(key == 13) // the enter key code
{
doSearch();
}
});
did you try using <button type="submit"> before your search icon
<span class="glyphicon glyphicon-search"></span>
to specify that clicking on that button is equivalent to a submit event for that form.
So this worked in the end. First, the proper HTML which works:
<form ng-submit="doSearch()" class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="col-md-offset-4 input-group" style="display:table;">
<input ng-model="search.text" class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text">
<span ng-click="doSearch()" class="input-group-addon" style="width:1%;">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</div>
</form>
Furthermore, there was an issue with the view not connecting to the controller. Actually, let me rephrase that - it was connecting to the controller but only when the whole page loaded and for my test, I had a console.log('I have loaded') put in there. So when I saw "I have loaded", I thought my controller was invoked properly.
However, the doSearch() was in the controller which was connecting via angular routing, so the ng-View was not connecting to the right controller.
I am not sure if this means anything to anyone but I am writing this in case someone else comes across an issue like mine.
So just to summarise the issue was not with the HTML as I originally thought. ng-submit (for form submission when pressing enter) and ng-click (for clicking the glyphicon) does the trick.
I just built a small search app for movies using AngularJS and Elasticsearch. I used the AngularJS UI Bootstrap Typeahead for autocomplete and in testing noticed something about user interaction.
Say I want to search for actors named Tom. I type in "tom" in the search input and 5 suggestions appear - fine. However, it won't let me just search for "tom" if all I do is press Enter on the keyboard. It automatically selects the first suggestion in the dropdown. IT WILL just search for "tom" if I just click on the submit button. My form markup is below - where am I going wrong?
I want to allow my users to be able to search for the queries they enter (when they press Enter) without being limited to just the suggestions provided...
<div class="col-sm-3 col-md-6 pull-left" style="border: 1px solid red;"><form name="q" ng-submit="vm.search()" class="navbar-form" role="search">
<div class="input-group input-group-md">
<input type="text" ng-model="vm.searchTerms" class="form-control input-md" placeholder="{{ vm.searchTerms }}" name="q" typeahead-show-hint="true" uib-typeahead="query for query in vm.getSuggestions($viewValue)" typeahead-on-select="vm.search($item)">
<span class="input-group-btn">
<button class="btn btn-primary btn-md" type="submit" id="results-search-btn" ng-submit="vm.search()"><i class="fa fa-search fa-lg"></i>
</button>
</span>
</div>
It is automatically selecting the first result. So when you press enter it already has focus on that first result. You can configure the angular ui typeahead to not automatically select the first result like so:
typeahead-focus-first="false"
see their documentation for further information:
https://angular-ui.github.io/bootstrap/#/typeahead
I'm building a small search app using Elasticsearch and AngularJS. I'm using AngularJS UI bootstrap typeahead to implement autocomplete and I'm using ES's edge_n_grams and highlight object to 1) generate the suggestions and 2) highlight the suggestions, respectively. ES highlight object wraps the suggestions in HTML <em></em> tags... which seems to be causing some issues with how I have things setup.
1) When I press Enter key instead of clicking on the search button - all that happens is the search terms are displayed wrapped in the <em></em> tags AND no search is performed... <em>search terms</em>
2) When I select a suggestion with the mouse, same thing happens.
The only time search performs is when I type a query in and click the search button...
Here is the search form that I'm using, I have ng-submit="search()" on the form element and on the button, not sure where I'm going wrong......?
<form name="q" ng-submit="search()" class="navbar-form" id="results-search" role="search">
<div class="input-group">
<input type="text" name="q" ng-model="searchTerms" class="form-control input-md" placeholder="{{ searchTerms }}" id="search-input" uib-typeahead="query for query in getSuggestions($viewValue)" typeahead-on-select="search($item)">
<div class="input-group-btn">
<button type="submit" ng-submit="search()" class="btn btn-primary btn-md"><i class="fa fa-search fa-lg"></i></button>
</div>
</div>
</form>
Am I doing something wrong with the UI Bootstrap Typeahead?
More clarification
So basically what I'm asking is how do I get the tags stripped from the suggestions, on selection and for searching?
Similar kind of example already asked in Stackoverflow: Click here
<select class="form-control" data-ng-options="t.name for t in vm.types"
data-ng-model="vm.object.type"></select>
The code above obviously displays a basic dropdown in a standard form-control manner. I've been trying to figure out how to convert this to a button style dropdown using Angular's ui-bootstrap directives but can't seem to get anywhere. Has anyone tried this?
I hope you already found the answer, but maybe someone else will find this useful. The previous answer refers to a common drop down not a button drop down. Here is an example, but without the benefits of hg-option while I didn't use a select but a button.
<div class="input-group">
<div class="input-group-btn" ng-class='{open: open}'>
<button class="btn dropdown-toggle"
data-toggle="dropdown"
ng-click='open=!open'>
Action<span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="choice in choices"
ng-click="setChoiceIndex($index);$parent.open =!$parent.open">
{{choice}}</li>
</ul>
</div>
<input type="text" ng-model="choices[index]" class="form-control">
</div>
where choices is an array of strings that will be displayed in the drop down and index is another variable in the controller scope that will reflect the selected choice.
I have created a basic demo of a drop down using angular bootstrap..
Visit :http://plnkr.co/edit/Mfw5zABqPTgLL4DAgAA3?p=preview
Hope this is what your are looking for.