Search code examples
angularjsbootstrap-typeahead

Bootstrap Typeahead on list of complex object

I have form which is displaying input fields dynamically which means that for specific customer is showed different input fields. Sequence and which input fields are shown is driven by database. For each input filed I would like to make typeahead. Complete form is represented with the object below:

{
    attributes:Array[9]
    s_Id:1376
    name:"test_name"
    c_Id:512
    active:true
    created:"2016-11-28T09:47:35.000+0000"
    updated:"2016-12-05T14:52:17.649+0000"
    valid:Moment
}

All information about input files are stored in array attributes which is list of object shown below. In this object there is array attvalue which present all previous values inserted for this specific field and this is actually typeahead for specific input field. 

{
    attributeId:138
    attributevalueId:618
    c_Id:512
    s_Id:1376
    attvalue:Array[4]
       0:"Typeahead value 1"
       1:"Typeahead value 2"
       2:"Typeahead value 3"
       3:"Typeahead value 4"
    language:"en"
    updatedAt:"2016-12-05T14:52:17.649+0000"
    created:"2016-11-28T09:47:35.000+0000"
}

On view I loop over attributes array to display form. For showing typeahead I have in input HTML element:

typeahead="attvalue as object.attvalue for object in object attributes| limitTo:100" ng-maxlength="45" autocomplete="off"

This does not show appropriate values, which for specific typeahead it should be shown like this (written in JS way): 

object.attributes:Array[10].attvalue=["Typeahead value 1", "Typeahead value 2", "Typeahead value 3", "Typeahead value 4"]

How to solve this issue? Better solution would be to solve it on view, then chaning complete controller.

Solution

  • I have found out how to solve this issues. First off all it is possible to make very complex list and objects, etc and still use bootstrap typeahead, becaues I have seen a lot of simple examples. Firt I have added array attvalues to list attributevalueList and property attvalue is just used for final value with ng-model directive. New object in list looked like this:

     object.attributes:Array[1].attvalues:

{
   attributeId:138
   attributevalueId:618
   c_Id:512
   s_Id:1376
   attvalue:""
   attvalues:Array[4]
      0:"Typeahead value 1"
      1:"Typeahead value 2"
      2:"Typeahead value 3"
      3:"Typeahead value 4"
   language:"en"
   updatedAt:"2016-12-05T14:52:17.649+0000"
   created:"2016-11-28T09:47:35.000+0000"
}

    I have corrected typeahed on view as follows: 

     typeahead="attvalues for attvalues in object.attributevalueList[$index].attvalues | limitTo:100" ng-maxlength="45" autocomplete="off">