How to send value from dropdown list?

Question

I have dropdown list :

<select name="timefilter" id="timefilter">
 <option value="Last week">@Translate("LAST_WEEK")</option>
<option value="Last 3 days">@Translate("LAST_3_DAYS")</option>
 <option value="Yesterday">@Translate("YESTERDAY")</option>
<option value="Today">Translate("TODAY")</option>
</select>

I need to send value from dropdown list to $scope

  $scope.GetMenuForSelectedTime = function (numberOfDays) {
}

How can i do it?

EDIT: My function that i need to call:

   $scope.SelectTicketByTime = function (range) {

    var range = range;
    var date = new Date();
    var day = date.getUTCDate().padLeft();
    var monthIndex = (date.getUTCMonth() + 1).padLeft();
    var year = date.getUTCFullYear();
    var hours = date.getUTCHours().padLeft();
    var minutes = date.getUTCMinutes().padLeft();


    $scope.GetMenuForSelectedTime = function (numberOfDays) {


        var d = new Date();
        d.toUTCString();
        day = date.getUTCDate() - numberOfDays;
        day = day.padLeft();
        var offset = d.getTimezoneOffset();
        d.setHours(00);
        var hoursToAdd = offset / 60;
        d.setHours(hoursToAdd);

        if (day > daysInMonth(monthIndex, year)) {
            var dayOffset = day - daysInMonth(monthIndex, year);
            day = dayOffset.padLeft();

            monthIndex = (date.getUTCMonth() + 2).padLeft();
        }
        var To = year + monthIndex + day + d.getHours() + '00';

        $scope.to = To;

        $http.get(TicketUrl + 'GetTickets/0/0?DateFrom=' + $scope.from + '&DateTo=' + $scope.to).
        then(RecivedTickets, ErrorResponse);
    }





    if (range == "Today") {
        $scope.GetMenuForSelectedTime(0);
    }

    else if (range == "Yesterday") {
        $scope.GetMenuForSelectedTime(1);
    }
    else if (width == "Last 3 days") {
        $scope.GetMenuForSelectedTime(3);

    }  else if (width == "Last 7 days") {
        $scope.GetMenuForSelectedTime(7);

    }

Add ng-model to your select?

putvande
– putvande

2015-06-10 11:54:17 +00:00
Commented Jun 10, 2015 at 11:54 — putvande
– putvande, Commented Jun 10, 2015 at 11:54
can u put an example ?

None
– None

2015-06-10 11:58:07 +00:00
Commented Jun 10, 2015 at 11:58 — None
– None, Commented Jun 10, 2015 at 11:58

Pierre-Alexandre Moller · Accepted Answer · 2015-06-10 12:27:46Z

2

This is the example for putvande response (thanks to him):

<select name="timefilter" id="timefilter" ng-model="selectedTime">
 <option value="Last week">@Translate("LAST_WEEK")</option>
<option value="Last 3 days">@Translate("LAST_3_DAYS")</option>
 <option value="Yesterday">@Translate("YESTERDAY")</option>
<option value="Today">Translate("TODAY")</option>
</select>

And then you will have the value of your option in the controller :

$scope.selectedTime //The selected option

Edit : The function in your controller, will not need a value in param because the controller already know this value. You should have something like this.

$scope.SelectTicketByTime = function () {
    var range = $scope.selectedTime;
    var date = new Date();
    var day = date.getUTCDate().padLeft();
    var monthIndex = (date.getUTCMonth() + 1).padLeft();
    var year = date.getUTCFullYear();
    var hours = date.getUTCHours().padLeft();
    var minutes = date.getUTCMinutes().padLeft();
}

edited Jun 10, 2015 at 12:27

answered Jun 10, 2015 at 12:02

Pierre-Alexandre Moller

2,3541 gold badge22 silver badges29 bronze badges

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

5 Comments

None Over a year ago

When i change dropdown list nothing happend...i dont get any call

Pierre-Alexandre Moller Over a year ago

Did you try to print "selectedTime" ? What's his value ?

None Over a year ago

nothing...its not calling my function at all...i have function $scope.SelectTicketByTime = function (range) { } in controller where range is value from dropdown list

Pierre-Alexandre Moller Over a year ago

@None So do I to show how it works in your function.

None Over a year ago

Let us continue this discussion in chat.

Arulkumar · Accepted Answer · 2015-06-10 12:26:16Z

0

I modify the code with ng-options and when you change any option in the dropdown, the ng-change will fire

<select name="ruleDetails" ng-model="selectedTime" 
  ng-options="time.id as time.value for time in timeDetails" 
  ng-change="GetMenuForSelectedTime(selectedTime)">
  <option value="">-Select Time-</option>
</select>

$scope.GetMenuForSelectedTime = function(id) {
    alert(id);
};

UPDATE:

This code also works, value will pass to the function.

<select name="timefilter" id="timefilter" 
  ng-model="selectedTime" 
  ng-change="GetMenuForSelectedTime(selectedTime)">
  <option value="Last week">@Translate("LAST_WEEK")</option>
  <option value="Last 3 days">@Translate("LAST_3_DAYS")</option>
  <option value="Yesterday">@Translate("YESTERDAY")</option>
  <option value="Today">Translate("TODAY")</option>
</select>

Please check this plunker

edited Jun 10, 2015 at 12:26

answered Jun 10, 2015 at 12:12

Arulkumar

13.3k15 gold badges51 silver badges76 bronze badges

2 Comments

None Over a year ago

its good example just problem is that i need this dropdown list in mvc populated because im using @Translate function if u now what i mean?

Pierre-Alexandre Moller Over a year ago

The problem here is that the function getMenuForSelectedTime expect an number of day (int) and the value of the select are string.

Collectives™ on Stack Overflow

How to send value from dropdown list?

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related