AngularJS替換過濾器的字符

我想在我的搜索框中替換任何字符作爲★字符，因爲我的數據數組中存儲了所有我的星形數據。AngularJS替換過濾器的字符

我在下面添加了我的代碼。

我是Angular的新手。我還沒有做到這一點。

var app = angular.module("myApp", []); 
 

 
angular.module('myApp') 
 
    .directive('hide-characters', HideCharactersDirective); 
 

 
function HideCharactersDirective() { 
 
    return { 
 
    restrict: 'A', 
 
    require: ['ngModel'], 
 
    link: function(scope, element, attrs, ctrls) { 
 
     var ngModelController = ctrls[0]; 
 

 
     ngModelController.$formatters.push(function(viewValue) { 
 
     return viewValue.replace(/./g, '*'); 
 
     }); 
 
    } 
 
    }; 
 
} 
 

 

 
app.controller("myCtrl", function($scope) { 
 
    $scope.records = [{ 
 
     "Name": "Alfreds Futterkiste", 
 
     "Star": "★★★" 
 
    }, 
 
    { 
 
     "Name": "Berglunds snabbköp", 
 
     "Star": "★" 
 
    }, 
 
    { 
 
     "Name": "Centro comercial Moctezuma", 
 
     "Star": "★★★★" 
 
    }, 
 
    { 
 
     "Name": "Ernst Handel", 
 
     "Star": "★★" 
 
    } 
 
    ] 
 
});

<html lang=""> 
 

 
<head> 
 
    <base target="_blank"> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title></title> 
 

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
</head> 
 

 
<body ng-app="myApp"> 
 

 

 
    <table ng-controller="myCtrl" border="1"> 
 
    <input hide-characters ng-model="search.Star" type="text"> 
 

 
    <tr ng-repeat="x in records | filter:search"> 
 
     <td>{{x.Name}}</td> 
 
     <td>{{x.Star}}</td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

來源

2017-04-18 Grcn

所以如果我輸入'test'（4個字符）在搜索框中，你想讓它變得改爲''****（ 4星），對吧？ – tanmay

從我的理解，要更改寫在搜索欄爲★任何字符。

我只是添加一個ng-change，給我的值爲ng-model，我會用RegExp替換每個字符（正如您嘗試的那樣）。

尋找工作如下片段：

var app = angular.module("myApp", []); 
 

 
app.controller("myCtrl", function($scope) { 
 
    $scope.changeValue = function(value) { 
 
    $scope.search.Star = value.replace(/./g, '★') 
 
    } 
 

 
    $scope.records = [{ 
 
     "Name": "Alfreds Futterkiste", 
 
     "Star": "★★★" 
 
    }, 
 
    { 
 
     "Name": "Berglunds snabbköp", 
 
     "Star": "★" 
 
    }, 
 
    { 
 
     "Name": "Centro comercial Moctezuma", 
 
     "Star": "★★★★" 
 
    }, 
 
    { 
 
     "Name": "Ernst Handel", 
 
     "Star": "★★" 
 
    } 
 
    ] 
 
});

<html lang=""> 
 

 
<head> 
 
    <base target="_blank"> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title></title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
</head> 
 

 
<body ng-app="myApp" ng-controller="myCtrl"> 
 

 
    <table border="1"> 
 
    <input ng-change="changeValue(search.Star)" ng-model="search.Star" type="text"> 
 

 
    <tr ng-repeat="x in records | filter:search"> 
 
     <td>{{x.Name}}</td> 
 
     <td>{{x.Star}}</td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

來源

2017-04-18 03:48:22 tanmay

這就是我真正想要的。非常感謝。 – Grcn

@Grcn很高興幫助！ :) – tanmay

AngularJS替換過濾器的字符

回答

相關問題