applying ng-click to options in a select box using angularjs

Question

I havent used angular before but I am trying to get this working. the code worked for me as a list, but I would like to get the same thing working using a select drop down. Can someone help please?

<select ng-model="data.selectedOption"> <option ng-click="myFilter = {pay_status : 'Paid'}" value="Paid Work">Paid Work</option> <option ng-click="myFilter = {pay_status : 'Volunteer'}" value="Volunteer Work">Volunteer Work</option> <option ng-click="myFilter = {opento : 'Undergraduates'}" value="Undergraduates">Undergraduates</option> <option ng-click="myFilter = {opento : 'Postgraduates'}" value="Postgraduates">Postgraduates</option> </select> </div>

I used to have the same code (the ng-click etc) using a list and it worked so I was hoping that I could do the same thing for option but no... what is it that I need to change?

Thanks for your help!

Sam Ternent · Accepted Answer · 2015-10-15 11:15:21Z

1

You can set your select directive to bind to your data through a controller

<div ng-controller="myCtrl">
  <select
    ng-model="myFilter"
    ng-options="value.label for value in myFilters">
        <option>--</option>
  </select>
  <div>
    myFilter: {{myFilter.filter}}
  </div>
</div>

and your JS like

function myCtrl($scope) {
  $scope.myFilters = [{
        "filter": {pay_status : 'Paid'},
        "label": "Paid Work"
    },{
        "filter": {pay_status : 'Volunteer'},
        "label": "Volunteer Work"
    },{
        "filter": {opento : 'Undergraduates'},
        "label": "Undergraduates"
    },{
        "filter": {opento : 'Postgraduates'},
        "label": "Postgraduates"
    }];

};

See the fiddle: - http://jsfiddle.net/vxvcbrxs/

edited Oct 15, 2015 at 11:15

answered Oct 15, 2015 at 10:55

Sam Ternent

2811 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

applying ng-click to options in a select box using angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related