CODEWITHSUNDEEP
angularjs
Gary Burton
Gary Burton

Reputation: 97

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

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!

Upvotes: 0

Views: 681

Answers (1)

Sam Ternent
Sam Ternent

Reputation: 281

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/

Upvotes: 1

Related Questions