AngularJS - change color on every dropdown
I have a dropdown to select a report to generate, so when a user selects a report from the dropdown, it generates it and downloads it for mobile. Using ng-change it will only go up when the user wants to generate different reports. I would love it so that they can select the same dropdown twice and load the report twice.
I have some 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/
I expect to select "two" twice and write the result to the console twice. Is this doable or should I use a different directive for this?
source to share
Adding a button will certainly help, it also takes away 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.
http://jsfiddle.net/ootnh0sz/3/
$scope.logResult = function() {
console.log($scope.currentlySelected);
// once downloaded
$scope.currentlySelected = null;
}
source to share