current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am having a select drop down, and I am adding options dynamically through Jquery append on it, and I want to associate all data in the dropdown, I mean all options selected into angular JS model.

I am having select as

 <select  multiple='multiple' ng-model="attrId" name='attribute' id='hiddenRemoteChoicePossibleAnswers' ></select>

and I am adding options on this select through some other Jquery dynamically after few server calls:

$('#hiddenRemoteChoicePossibleAnswers').append("<option selected='selected' value='"+optionValue+"'> "+optionValue+" </option>");

and I want attrId inside ng-modal to be changed on append, but it ain't updating at all, for that I have to select all the options manually, I have to associate all values in the options in the model.

Any help will be useful.

Thanks in advance.

share|improve this question
    
Look into ng-options. Angularjs does this very nicely without resorting to jquery methods. –  rGil May 20 '13 at 13:06
    
But I have to add options on some other event, dynamically, on click on another button, a new option will be added on the dropdown, and on form submit I want all values added in it, to be stored in the database, I can't add all values on startup. –  Saurabh Dixit May 20 '13 at 13:13
    
I think you are right, I should change everything accordingly, actually I was using jquery templates and lots of things, I wanted some quick fix for this, because in this case I may need to change number of things, but I think this is better to change than going for temporary fix Thanks –  Saurabh Dixit May 20 '13 at 13:28

1 Answer 1

up vote 1 down vote accepted

What you are doing is not the angular way. AngularJS is a model driven. UI manipulation should happen either

  • When model gets updated, and hence cause the angular bindings to re evaluate.
  • Using directives

What that means is that you should not manipulate the DOM elements and expect Angular to pickup those changes.

In your case, what you would have to do would be to define the model property on the $scope which would be of array type.

The data that you want to add gets added to this model property using array.push method, this would cause the UI select option to update.

I would highly recommend you to read some tutorials (including on on angular site) before trying out all these thing. Angular is a very different beast and people coming from jquery background would have hard time working with it, until the fundamental understanding of how Angular works is there.

These links would help you

http://blog.artlogic.com/2013/03/06/angularjs-for-jquery-developers/

http://www.egghead.io/ -> Good angular videos

share|improve this answer
    
Thanks, I think I should dig more into angular –  Saurabh Dixit May 21 '13 at 6:14

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.