Angular directive selection options

Question

How do you choose an option in the angular directive?

var options = elem.find('#test-code-select option'); expect(angular.element(options[0]).text()).to.equal('234'); expect(angular.element(options[1]).text()).to.equal('236'); 

They work fine, but how can I force a manual selection of a parameter?

 angular.element(options[1]).click(); //nope angular.element(options[1]).trigger('click'); //nope angular.element(options[1]).attr('selected', true); //nope 

EDIT:

The directive template includes a choice with an internal ng model, I suspect this is causing the problem:

 <select id='test-code-select' ng-options='code as code for code in codeList' ng-model='code'> 

Answer 1

This works for me:

 var select = elem.find('#test-code-select'); select.val('236').change(); expect(scope.code).toEqual('236'); 

Note the call to change() .

Answer 2

If you just want to test the click handler, you just need to fire the click event:

angular.element(options[1]).trigger('click');

You may need to allow various handlers to be executed using $ timeout.flush (), $ scope.apply () and / or by putting your verification code in the $ timeout block.

Answer 3

 // UPDATE: to select multiple values pass an array // select is selector for <select> tag, preferrably ID select.val(['236', '479']).change(); 

Answer 4

I added this as a different approach, besides what @ejain answered.

If you have jquery avaiable (i.e. not jqLite), I think the following action should also fire when change run by option:

 var select = elem.find('#test-code-select'); var oneOption = select.find('option:contains("236")'); oneOption.prop('selected', 'selected').trigger('change'); expect(scope.code).toEqual('236');