Pass value from the view to controller such that it can be used as a parameter to the function in Angular.js

Question

I have created a dropdown menu and want that when one of the option is selected, the value is passed to the controller such that I can use that value as a parameter to the function. My dropdown menu looks like:

<div class="dropdown dropdown-menu-right filter-dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Filters
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#" ng-click="filter_field = 'evt'">Event Name</a></li>
            <li><a href="#" ng-click="filter_field = 'sun'">Source User</a></li>
            <li><a href="#" ng-click="filter_field = 'dun'">Target User</a></li>
        </ul>
    </div>

The function that i am want to pass the object to is:

function userEventData (resp) {
            $http({
                method: 'GET',
                url: resp.results["@href"]
            }).success(function (responseData) {
                logger.info("responseData inside get 2", responseData);
                logger.info("field values", **$scope.filter_field**);
                filterEventField(responseData, **$scope.filter_field**);
                //return responseData;
            });

The ideal option is to pass values like evt for Event Name, sun, Source name etc. Because eventually I will be using it as key name to access the value of the data object. So the content will look like: responseData.object[i].evt

function filterEventField(responseData, field){
             dataitems = VisDataSet([]);
             logger.info("filter_field", field);
             for(var i = 0; i < responseData.objects.length; i++) {
                console.log(responseData.objects[i].evt);
                var startDate = new Date(responseData.objects[i].spt);
                var endDate = new Date(responseData.objects[i].det);
                var temp = {
                                id: i,
                                content: responseData.objects[i].field,
                                start: startDate,
                                end: endDate,
                                title: "user: " + responseData.objects[i].sun + "<br/>dip: " + responseData.objects[i].dip + "<br/>start: " + startDate
                            };

                        dataitems.add(temp);
                    }
                    $scope.data = {items: dataitems};
                    logger.info("inside filtereventfield", $scope.data);
            }

How can I get value from the view when a particular option is selected?

Answer 1

Put an action function on scope:

 $scope.doIt = function() {
     userEventData(resp);
 };

Then use it in the ng-click expression:

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li ng-click="filter_field = 'evt'; doIt()">Event Name</li>
    <li ng-click="filter_field = 'sun'; doIt()">Source User</li>
    <li ng-click="filter_field = 'dun'; doIt()">Target User</li>
</ul>

---

OR

 $scope.doIt = function(val) {
     $scope.filter_field = val;
     userEventData(resp);
 };

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li ng-click="doIt('evt')">Event Name</li>
    <li ng-click="doIt('sun')">Source User</li>
    <li ng-click="doIt('dun')">Target User</li>
</ul>

Answer 2

Try using ng-change in your view, which calls a function in your controller to get the selected value from the view. Hope this solves your problem.