How to integrate bootstrap Typeahead in Angularjs

Source: Internet
Author: User


When using Typeahead, there is a requirement that when the user selects one of the items, the ID of the project is saved to a different variable, and then the ID is sent to the server when the form is submitted.

However, in Typeahead, the ANGULARJS is not aware of the element's operation, resulting in the inability to get the latest data.

Events after selecting data in Typeahead itemselected

In Typeahead, we can define a itemselected event handler, after selecting an item, Typeahead triggers the event, in which we can get the currently selected element, the corresponding value, the prompt text that has been displayed.

This function is used in the following ways:

Itemselected:function (item, Val, text) {  (val);  

Integrated into the page, we can configure the Typeahead configuration parameters as follows.

var option = {  
    ajax: {  
        URL: ' @Url. Action ("Ajaxservice") ',  
        timeout:300, method  
        : ' Post ',  
        predispatch:function (query) {return  
            {type:type, query:query};  
        Preprocess:fun Ction (data) {return  
    display: "Name",  
    Val: "id",  
    itemselected:function ( Item, Val, text) {  (item);  
$ ("#tbxName"). Typeahead (option);

However, when using ANGULARJS, there is a problem, if we directly give this ID to an element, such as the input box, ANGULARJS can not detect the change in the value of the element, angularjs through the monitoring element to gain focus, lose focus, Events such as change to perceive the changes in the input elements, when the direct assignment through the code, there will be no triggering of these events.


We can encapsulate the Typeahead by Angularjs's custom instructions, and when the itemselected event is triggered, call the Angularjs $apply to send a notification so that the angularjs can naturally perceive the change in the data.


This column more highlights: http://www.bianceng.cn

In order to facilitate the already familiar typeahead friend, continues to use the original way to configure, we do not modify the configuration method.

The directive is defined as follows:

Custom directive  
app.directive ("Typeahead", function () {  
    var option = {  
        restrict: "A",  
        require: "? Ngmodel",  
        Scope:  {  
            option: "=typeahead"
        link:function (scope, element, Attrs, Ngmodel) {  
            //typeahead configuration Parameters  
            var option = scope.option;  
            Replace the original itemselected with the itemselected function of Angularjs  
            //After the user has selected the option, execute  
            var itemselected through angularjs = Option.ite mselected;  
            option.itemselected = function (item, val, text) {  
                scope. $apply (function () {  
                    itemselected (item, Val, text); c18/>})  
            Element.typeahead (option);  
    return option;  

Scope is a custom scope, =typeahead is the value of the Typeahead attribute, the rest of the processing is relatively simple, we will be the original itemselected event intercepted, through scope. $apply for processing, so Angularjs will naturally be able to get the data changed.

The element is defined as follows, adding an Attribute named Typeahead, the value being the configuration parameter object, defined on the Angularjs model object.

<input typeahead = "Typeaheadoption" ng-model= "PetName" type= "text"/>

Here is the corresponding script.

App.controller ("Mycontroller", function ($scope) {  
//extra additional parameters  
    $scope. Type = "Java";  
    The standard use method  
    $scope. PetName = "Cat";  
    $scope. Petid = "";  
    Using the standard typeahead configuration parameters, the Typeahead Attribute is used on the element to connect  
    $scope. typeaheadoption  
        = {  
            ajax: {  
                URL: ' @ Url.action ("Ajaxservice") ',  
                timeout:300, method  
                : ' Post ',  
                predispatch: function (query) {return  
                    {type: $scope. Type, query:query}  
                preprocess:function (data) {  
                    retur n data;  
            display: "Name",  
            Val: "id",  
            itemselected:function (item, Val, text) {  
                $ Scope.petid = val;}};  


Using Angularjs's custom directives, we can easily encapsulate event handling beyond Angularjs into Angularjs.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.