CODEWITHSUNDEEP
javascriptangularjs
Arpit Goyal
Arpit Goyal

Reputation: 1005

Detect changing of the select list value with AngularJS

I tried using ng-change on select but the problem is, I need to send ticket.id to the method but, ticket.name to model.

<select name="ticketAttendeeMapping"
        ng-model="attendee.ticketTypeName"
        class="form-control">
    <option ng-repeat="ticket in inTransitionTickets | filter: greaterThan('countRemaining', 0)"
            ng-value="ticket.name"
            ng-click="onAttendeeTicketmapping(ticket.id, $parent.$index)">
    {{ticket.name}}
    </option>
</select>

I also tried doing this:

<select name="ticketAttendeeMapping"
        ng-model="attendee.ticketTypeName" class="form-control"
        ng-options="ticket.name as ticket.name for ticket in inTransitionTickets | filter: greaterThan('countRemaining', 0)"
        ng-change="onAttendeeTicketmapping(ticket.id, $index)">
    <option value="" disabled>Choose Your Ticket</option>
</select>

Upvotes: 2

Views: 1898

Answers (3)

Rishi Prakash
Rishi Prakash

Reputation: 1779

I am not sure, If what I have done here is what was originally asked by OP. We can't use ng-options here simply!! because while we use "ng-options" it restricts our access to current selected Json element to the properties explicitly mentioned in ng-options, on the contrary ng-repeat gives you complete access to current Object.

<select name="ticketAttendeeMapping"
        ng-model="SelectedTicketNameFromngModel"
        class="form-control">
    <option ng-repeat="ticket in ticketJson "
            ng-value="ticket.name"
            ng-click="alertMe(ticket.id)">
    {{ticket.name}}
    </option>
</select>


$scope.SelectedTicketNameFromngModel = '';
    $scope.selectTicketIdFromMethod = '';
    $scope.ticketJson = [{'name':'tick1','id':'t1'},{'name':'tick2','id':'t2'},{'name':'tick3','id':'t3'}];


    $scope.alertMe = function(tId){
               $scope.selectTicketIdFromMethod = tId;
    }

http://jsfiddle.net/HB7LU/16124/

enter image description here

Upvotes: 0

Sheelpriy
Sheelpriy

Reputation: 1745

try to do this:

  <select name="ticketAttendeeMapping" ng-model="attendee.ticketTypeName" class="form-control" ng-options="ticket.name as ticket for ticket in inTransitionTickets | filter: greaterThan('countRemaining', 0)" ng-change="onAttendeeTicketmapping(attendee.ticketTypeName, $index)">
        <option value="" disabled>Choose Your Ticket</option>
    </select>

now you will get ticket i.e."attendee.ticketTypeName" object in ur ng-change method. where u can get its "id"

Upvotes: 1

Wayne Ellery
Wayne Ellery

Reputation: 7958

The easiest way is to just use the object in the model:

<select name="ticketAttendeeMapping" ng-model="attendee.ticket" class="form-control" ng-options="ticket.name for ticket in inTransitionTickets" ng-change="change(attendee.ticket.id)">
</select>

Then you can access the name by using $scope.attendee.ticket.name and you can access the id by using $scope.attendee.ticket.id

Plunkr

Upvotes: 3

Related Questions