Develop Reference

Getting typeahead to work in an Angular template?

I currently have a partial HTML that is being routed to, with a template and a custom Controller. The code snippet in my Angular template I would like to get working is:
<input type="text" typeahead=val for val in getValue($viewValue)>
However, it never enters into the function getValue(), while all other functions in my controller seem to be okay. When I take the typeahead out of the Angular template/partial, it seems to work. Why is this and how do I fix it?

You need to have an ng-model attribute to use the typeahead directive from AngularUI, even if you don't need to bind it to anything.
Change your markup to similar to the following:
<input type="text" ng-model="typeaheadVal" typeahead="val for val in getValue($viewValue)">

Change text input value with jQuery - Chrome extension

I am trying to change input value in particular web site from chrome extension. In order to do that I am using jQuery in my content script. It works in most of the cases, but I didn't manage to change value of the input when it is part of AngularJS view. I found the same problem when I use let say kendoUI. I am trying to set the value calling $('element').val('value') and then try to call blur and change event, but without any success.
I went through may be 99% of the posts related to this topic, but still can't find working solution.

You just need to Call $scope.apply() in order to let angular know about updating the bindings. This is mainly because by default, angular doesn't know anything about the changes you are making in jQuery.
Below is a sample code, and here is a jsFiddle. Hope this helps.
app.controller('testCtrl', ['$scope', function ($scope) {
$scope.changeValue = function() {
$('#test').val("new Value");
$scope.apply();
}
<div class="form-inline">
<input type="text" id="test" value="test">
<input type="submit" value="submit" ng-click="changeValue()">
</div>

How to add an onclick jquery function in an input area

I am a newbie in Javascript and jquery I have a jquery function
$('.input-group .date').datepicker({
});
for
<div class="input-group date" id="dp3">
<input class="form-control" type="text" placeholder="Date" name="date" value="">
</div>
I want to add this inside input tag using onclick="" can you please tell me how to do this ?

If I'm thinking what your thinking then it's wrong.
.datepicker() already assigns an onClick event so you don't have to create an extra one.
You have to make sure you are using jQuery and jQuery UI in order for datepicker to work.
Then you either have to put your script before you close body or in the head and use
$(document).ready(function(){ ... });
I also think you are using the wrong selector here.
. is class
# is ID
So it should be
$('.input-group .form-control').datepicker();
Example: http://jsfiddle.net/Spokey/AjRm3/

For those coming to this question because they want to know how to bind to the event that happens when someone clicks on an input box, then this is useful:
$('input.your-input-box-class').focus(function(e){
// do something
});
For those who want to use datepicker like the original question asks, then remember that jQuery UI abstracts away from these types of details. So just use the widgets like they were meant to be used. In this case, create the datepickers for all your input boxes that have a certain class (say date maybe) when the DOM is done loading:
$(document).ready(function(){
$('input.datepicker').datepicker({ /*... pass options here ...*/ });
});
And for options, you read the documentation, they include handling all the events you need:
http://api.jqueryui.com/datepicker/

Call a function:
onclick="someFunction(this);"
Set function:
function someFunction(this) {
$(this).prev('.input-group.date').datepicker({});
}

You bind datepicker to DOM element, not onClick.
$(document).ready(function(){
$('.form-control').datepicker({});
});
Or add it in function, so you can call it dynamically.

put the set of code inside a javascript function say clickMe()
function clickMe(){
$('.input-group .date').datepicker({
});
}
now call the function in click method.
<div class="input-group date" id="dp3">
<input class="form-control" type="text" placeholder="Date" name="date" value="" onclick="clickMe()">
</div>

Unable to set focus on an input of Twitter Bootstrap's Typeahead

When I remove these attributes:
data-source="<?=str_replace('"', '"', json_encode($equipment, JSON_HEX_TAG | JSON_HEX_APOS)); ?>" data-items="4" data-provide="typeahead"
I am able to perform this:
$(document).ready(function() {
$('.first').focus();
});
This is my HTML markup for this:
<div class="itemx">
<input type="text" class="input-large first" autocomplete="off" placeholder="Equipment Name/Label" name="equip[]" data-source="<?=str_replace('"', '"', json_encode($equipment, JSON_HEX_TAG | JSON_HEX_APOS)); ?>" data-items="4" data-provide="typeahead" />
<input type="text" class="input-large second" placeholder="Quantity" name="quant[]" />
</div>
NOTE: Typeahead works well an this it's nothing wrong with this:
data-source="<?=str_replace('"', '"', json_encode($equipment, JSON_HEX_TAG | JSON_HEX_APOS)); ?>"

I recently had this issue. It fixed itself when I declared the .typeahead() code block first, and then gave the field focus. If I reversed the order, the .typeahead() functionality broke.
$('#myField').typeahead({
...
});
$('#myField').focus();

typeahead has it's own version of focus method. Default behaviour is prevented of focus event so the only way is to keep typeahead reference.
var typeaheadReference = $('.typeahead').typeahead({ ... };
then you just call typeaheadReference.focus();

Don't ask me why, but this is the only thing that worked for me:
setTimeout("$('[name=search_input]').focus();", 0)

Typeahead is actively blocking default focus event. I am not sure why (perhaps there is a use case where focus breaks typeahead, I haven't seen it).
In the typeahead.js source (at the end lines 316 to 321):
$(document).on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
var $this = $(this)
if ($this.data('typeahead')) return
e.preventDefault()
$this.typeahead($this.data())
})
Change to:
$(document).on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
var $this = $(this)
if ($this.data('typeahead')) return true
$this.typeahead($this.data())
})
Returning true allows the focus event to complete (only runs this after first focus when typeahead is established) and removing the e.preventDefault() call allows focus to fire on initial setup.
I have a pull request in for the change - will update answer with authors' response.

It depends on which version you are using, I bumped into this issue in 0.9.3.
Not the cleanest, but you can try to set a timeout:
setTimeout(function(){ $('.first').focus(); }, 0);

Using typeahead.js 0.10.2 the solution specified by Evil Closet Monkey almost worked for me. As specified, you have to set focus after the call to "typeahead", but keep in mind that the "typeahead" invocation will manipulate the DOM and add additional elements. After calling "typeahead", locate the element representing your input box and set focus to that. As shown below, the input element has the class "tt-input" assigned to it.
Example:
html:
<div id="levelSearchBox" style="clear: both">
<input class="typeahead" type="text" placeholder="Search" data-bind="value: selectedRootLevel" />
</div>
js:
$('#levelSearchBox .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 0,
autoselect: true
}, {
displayKey: 'name',
source: levels.ttAdapter()
}).on('typeahead:selected', function ($e, datum) {
selectedCallBack(datum["name"]);
});
$('#levelSearchBox .tt-input').focus();

Maybe the input is hidden.
$('input:visible').focus();

I created a jsfiddle for people to quickly test the version of the library
http://jsfiddle.net/uryUP/
I realized another piece of my code was disabling my input box causing the focus to fail, but this helped me realize it was my code and not the library
$('#locationSearchText').typeahead({
minLength: 1,
highlight: true
},
{
source: function (query, process) {
return process([{value:'abcdefg'}]);
}
});
$('#locationSearchText').focus().typeahead('val', 'abc');

I end up using the click event instead of focus and it works for me.

angular-ui: datepicker seems to hang angularjs when showing button

I have this piece of html code in my application (the ng-app and ng-controller values are defined before):
<div>
<label for="projectSearchDateFrom"><%= Res("Projects.Search.From")%></label>
<input id="projectSearchDateFrom" type="text" ng-model="startDate" ui-date="dateOptions"/>
<img ng-show="hasStartDate()" ng-click="clearStartDate()" src="/_Layouts/ClientPortal/Images/layout/TA/delete-small.png" alt="<%= Res("ToolbarDialog.Clear")%> <%= Res("Projects.Search.From")%>" title="<%= Res("ToolbarDialog.Clear")%>" />
</div>
My AngularJS controller looks like this:
function ProjectSearchCtrl($scope) {
$scope.startDate = '';
$scope.hasStartDate = function () {
return $scope.startDate != '';
};
$scope.clearStartDate = function () {
$scope.startDate = '';
};
$scope.dateOptions = {
dateFormat: "yy-mm-dd",
showOn: "focus"
};
}
This works perfectly: I have a datepicker set up correctly thanks to AngularUI, the AngularJS binding works...
But if I change the showOn value to "button" or "both" (the two possible options which will actually show the datepicker button), everything after the input (containing the ui-date attribute) stops working: ng-show, ng-click... The controller doesn't even get called.
Versions (all is up-to-date):
jQuery 1.7.2
angularJS 1.0.0
angularUI 0.1.0
Chrome 20

Please take a look at this line in the Select2 directive. This is a note to ANYONE writing a directive / implementing a plugin in AngularJS (not just AngularUI):
Any plugin that injects a new DOM element immediately after the linked element runs the risk of disrupting the compiler. The reason is because the way AngularJS works, it caches the index of each DOM element at compile time, and then makes a second pass upon linking. When you inject new DOM, you offset the index of all siblings immediately after the directive.
For this reason, I've been forced to wrap both TinyMCE and Select2 in a setTimeout so that the DOM is injected after the linking is done. Note that I don't bother using $timeout because I really don't need/want $apply() to fire just to turn on the plugin, as there are already callbacks in place that do this when the plugin changes the data.
I'll look into making sure this is uniform across AngularUI. Unfortunately, there appears to be no elegant solution to this problem in AngularJS at this time, however it's a problem I've been thinking about for some time and am constantly looking for a better solution towards.
Read this Google Groups post for more information about compiling vs linking: https://groups.google.com/forum/?fromgroups#!searchin/angular/compile$20link/angular/RuWn5W3Q5I0/KJhcQJ_RNsIJ
You can also open a bug ticket on the AngularUI project in the future.

As suggested by Pete BD in his comment on the question, there is some kind of bug/unwanted behaviour in the way that jQueryUI and angularJS interact. A workaround is to wrap the input control in a div.
<div class="date">
<label for="projectSearchDateFrom"><%= Res("Projects.Search.From")%></label>
<div>
<input id="projectSearchDateFrom" type="text" ng-model="startDate" ui-date="dateOptions"/>
</div>
<img class="clear" ng-show="hasStartDate()" ng-click="clearStartDate()" src="/_Layouts/ClientPortal/Images/layout/TA/delete-small.png" alt="<%= Res("ToolbarDialog.Clear")%> <%= Res("Projects.Search.From")%>" title="<%= Res("ToolbarDialog.Clear")%>" />
</div>
Now I can use showOn "both" or "button".

This is fixed in the latest release!