Question

我是AngularJS的新手。我有这样的自定义过滤器。

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

在ng-change上我想触发我的自定义过滤器。意思是，当用户选择option1时我想触发上面的过滤器。

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

Answer 1

尝试此解决方案。

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 2

我认为您正在尝试创建一个选择列表。所以你可以这样做。

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

Answer 3

实现这个问题的方法很多，但我更喜欢一个完整的Angular解决方案.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();
        }
    };
});

工作DEMO

选择下拉列表中的AngularJS自定义过滤器触发器

3 个答案: