Angularr JS 맞춤 필터가 선택 드롭 다운시

Question

Angular JS를 처음 사용했습니다. 나는 이와 같은 커스텀 필터를 가지고있다.

app.filter('makeUppercase', function() { 
    return function (item) { 
    return item.toUpperCase(); 
    }; 
}); 

변경 될 때, 사용자 정의 필터를 트리거하고 싶습니다. 사용자가 옵션 1을 선택하면 위의 필터를 트리거하려고합니다.

<md-select ng-model="myModel" ng-change="" placeholder="Select an option"> 

Answer 1

선택 목록을 만들려고한다고 생각합니다. 그래서 당신은 이렇게 할 수 있습니다.

<select ng-model="myModel" ng-options="obj as (obj | makeUppercase) for obj in objects" placeholder="Select an option"> 
</select> 

Answer 2

이 솔루션을 사용해보십시오.

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>

Answer 3

많은 방법으로이 질문을 달성하기 그러나 나는 총 각도 solution.Below 내가 당신의 질문에서 이해 무엇을 기반으로 HTML 템플릿입니다 선호 할 것입니다.

드롭 다운에서 값을 선택하는 순간 ng-model 값은 사용자가 만든 필터에서 대문자로 바뀝니다.

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(); 
     } 
    }; 
}); 

나는 단지를 트리거 할