CODEWITHSUNDEEP
javascriptangularjs
Kyle Muir
Kyle Muir

Reputation: 3925

AngularJS - fire ng-change on every drop down selection

I have a drop down for selecting which report to generate, so when a user selects the report from the drop down it then generates it and downloads it for a mobile. Using ng-change it will only pick up when a user wants to generate different reports. I'd like it so they can select the same drop down item twice and have it download the report twice.

I have code similar to this:

Markup:

<div>
    <select ng-model="currentlySelected" 
            ng-options="opt as opt.label for opt in options" 
            ng-change="logResult()">
    </select>
    The value selected is {{ currentlySelected.value }}.
</div>

Javascript:

angular.module('demoApp', []).controller('DemoController', function($scope) {

    $scope.options = [
        { label: 'one', value: 1 },
        { label: 'two', value: 2 }
    ];
    $scope.currentlySelected = $scope.options[1];

    $scope.logResult = function() {
         console.log($scope.currentlySelected);   
    }
});

Fiddle: http://jsfiddle.net/KyleMuir/cf59ypyw/

What I expect is to select "two" twice and have it log the result to the console twice. Is this doable or should I be using a different directive for this?

Upvotes: 4

Views: 5705

Answers (1)

SoluableNonagon
SoluableNonagon

Reputation: 11755

Adding a button will surely help, it also takes away from any additional programming, it's just one extra element:

http://jsfiddle.net/ootnh0sz/1/

<select ng-model="currentlySelected" ng-options="opt as opt.label for opt in options" ng-change="logResult()"></select>
<button ng-click="logResult()"> Go </button>

Update.

Resetting the form seems to be the only option left.

http://jsfiddle.net/ootnh0sz/3/

$scope.logResult = function() {
     console.log($scope.currentlySelected); 

    // once downloaded
    $scope.currentlySelected = null;
}

Upvotes: 2

Related Questions