I'm new to AngularJS. I have a custom filter like this.
app.filter('makeUppercase', function () {
return function (item) {
return item.toUpperCase();
};
});
On ng-change I want to trigger my custom filter. Means, when user select option1 I want to trigger the above filter.
<md-select ng-model="myModel" ng-change="" placeholder="Select an option">
Try this solution.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $filter) {
$scope.option = ["option01", "option02", "option03"];
angular.element(document.querySelector('#option')).on('change', function() {
var a = this.selectedOptions[0].label;
console.log(a);
$scope.result = $filter('makeUppercase')(a);
console.log($scope.result);
})
});
app.filter('makeUppercase', function() {
return function(item) {
console.log("OK");
return item.toUpperCase();
};
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select id="option" ng-model="selectedName" ng-options="x for x in option ">
</select>
</div>I think you are trying to create a select list. So you can do like this.
<select ng-model="myModel" ng-options="obj as (obj | makeUppercase) for obj in objects" placeholder="Select an option">
</select>
Many ways to achieve this question but I would prefer a total Angular solution.Below is a HTML template based on what I understood from your question.
The moment you select a value from the drop down the ng-model value is turned into UPPERCASE from the filter you created.
HTML
<div role="main" class="container theme-showcase" ng-app="angularTable">
<div class="" style="margin-top:90px">
<div class="col-lg-8">
<div class="page-header"></div>
<div class="bs-component" ng-controller="listdata">
<select ng-options="x.username as x.username for x in users" ng-model="myModel" ng-change="optionChanged()"></select>
{{myModel | makeUppercase }}
</div>
</div>
</div>
</div>
JS
// Code goes here
var app = angular.module('angularTable', []);
app.controller('listdata', function($scope, $http) {
$scope.users = [];
$scope.myModel;
$http.get("demo.json").success(function(response) {
$scope.users = response;
console.log($scope.users);
});
$scope.optionChanged = function() {
console.log("options have been changed..");
};
});
app.filter('makeUppercase', function() {
return function(item) {
if (item) {
console.log(item)
return item.toUpperCase();
}
};
});
Working DEMO
