Component Select2 with Angularjs

Asked

Viewed 1,611 times

0

Good afternoon

Someone uses the Select2 component (https://github.com/select2/select2) to create dropdown components?

I am going through the following problem, I have two components in a javascript that are placed on the screen as the user adds new lines. And in these components of type Select2, the Angularjs ng-model tag is placed pointing to an attribute of an item for example, but when it is called via AJAX the item with its attributes the Angularjs does not realize that the value should be changed and the class of the component continues as ng-pristine instead of ng-Dirty, using Google Chrome the input where the item code is stored does not turn pink at the time of the change, which indicates that the value continued the same as the received when the user informed to create a new line of items.

Javascript html that mounts the component on the screen: 

<input  ng-model='item.oid' data-url='${pageContext.request.contextPath}/cadastros/item' new-item='true' data-id='oid' data-text='descricao' name='itens[{{$index}}].item.oid' id='item{{$index}}' type='select2' style=' min-width: 300px;' class='form-control' />

inserir a descrição da imagem aqui

javascript html twitter-bootstrap angularjs jquery-select2

1 answer

1


To use the Select2 component in Angularjs I recommend using this here.

To have the behavior you are looking for you will need to create a property in the Controller (or anything else) you are using and manipulate this property. Whenever there is change in the property with the array of objects to be displayed in the component the update will occur on screen.

  • And would there be no way to use it the way it is? The component is working perfectly, it’s just this detail I mentioned above.

  • @Giancarlogiulian explain a little better what you want to do to try to help you? Got a little confused your text above. The component displays a list that you select to add somewhere or you update the list and want the component to update itself?

  • the component displays a list I select to add one of the items in the input, but I was wondering if there’s a way to do this without using the ui-select you gave me so I don’t have to add another file. js in the project.

  • 1

    @Giancarlogiulian from what I remember when you use this component he creates other elements on screen, that are not on the scope of the angular, IE, the angular does not know that they exist. What you could do (a little gambiarra) is to trigger the method onchange of this element modifying the value of some other element that this yes is being observed by the angular. To then your controller do something through the watch ngModel. Got it? (kind of complicated to explain this)

  • Thank you @Thiagodorneles, your reply was clear, I could understand.

Browser other questions tagged javascript html twitter-bootstrap angularjs jquery-select2

You are not signed in. Login or sign up in order to post.