Editor

Pregled code-a:

<!DOCTYPE HTML>
<html lang="hr">
<head>
<meta charset="UTF-8">
<title>AngularJS - JS $filter</title>
</head>
<body ng-app="mojApp" ng-controller="MojCtrl">

Definiranje vlastitog filtera koji čini početno slovo velikim.
<hr>
<br><br>

Utipkajte više riječi: <input ng-model="naslov" size="70">
<br>
<br>{{filtName}} : <b>{{naslov2}}</b>
<br>
<br>Izaberi filter:
<br><button ng-click="filtriraj('ucwords')">ucwords</button>   
<br><button ng-click="filtriraj('ucfirst')">ucfirst</button>

<script src="../angularjs/1.2.9/angular.min.js"></script>
<script>
    var mojModul = angular.module('mojApp', []);
    
    //filter ucwords - Svaka rijec u recenici ima prvo slovo veliko
    mojModul.filter('ucwords', function(){
        return function(input){
            var rijeci='';
            var rijeci_niz=input.split(' ');
            for (var i=0;i<rijeci_niz.length;i++) {
                var Rijec = rijeci_niz[i].substring(0, 1).toUpperCase()+rijeci_niz[i].substring(1).toLowerCase();
                var rijeci = rijeci + ' ' + Rijec;
            }
            return rijeci;
        }
    });
    
    //filter ucfirst - Samo prva rijec u recenici ima prvo slovo veliko
    mojModul.filter('ucfirst', function(){
        return function(input){
            return input.substring(0,1).toUpperCase() + input.substring(1).toLowerCase();
        }
    });
    
    
    mojModul.controller('MojCtrl', function($scope, $filter){
        
        //model
        $scope.naslov='oVo je neKaKva reČenica';
        
        //init
        $scope.filtName='bez filtera';
        
        
        //filter
        $scope.filtriraj = function(f){
            $scope.naslov2 = $filter(f)($scope.naslov);
            $scope.filtName = f;
        }
        
    });
    
</script>

</body>
</html>

Pregled stranice:

Pogledaj stranicu ../javascript/angularjs/primjeri/48filter_custom_ng-click.html.