我刚刚开始学习Angular.js，并遇到了自定义过滤器的概念。我尝试创建一个，但是没有用。实际上，尽管控制台没有显示任何错误，但是也没有显示应该过滤的文本。
让我告诉你我的html代码：
<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>learn angular</title>
<meta name="author" content="Ashish toppo">
<link rel="stylesheet" href="css/index.css"> <!-- let us load our css file -->
<script src="angular/angular.min.js"></script> <!-- let us load our angular.js file -->
<script type="module" src="js/index.js"></script> <!-- let us load our js file -->
</head>
<body>
<div class="heading" id="heading"> {{"Hii"+" "+"There"}} </div>
<!-- the below shall display the user data -->
<div ng-controller="userDataCtrl">
<strong>First Name:</strong> {{data.firstName}} <span>(this is not filtered)</span> <br>
<strong>Last Name:</strong> {{data.lastName}} <span>(this is not filtered)</span> <br>
<hr>
<strong>First Name:</strong> {{data.firstName | uppercase}}
<span>(this is filtered to uppercase)</span> <br>
<strong>Last Name:</strong> {{data.lastName | lowercase}}
<span>(this is filtered to lowercase)</span> <br>
<hr>
<strong>plan:</strong> {{data.plan | dashed}} <span>(this is custom filtered to Dashed)</span>
<br>
</div>
</body>
</html>
现在这是我的javaScript代码的样子：
var app = angular.module("myApp", [])
.controller("userDataCtrl", function($scope){
var userData = {
firstName: "Ashish",
middleName: "",
lastName: "Toppo",
dateOfBirth: new Date(2001, 4, 8),
plan: "super-basic-plan"
}
$scope.data = userData;
});
app.filter("dashed", function(){
/* this shall replace all dashes with space */
return function(text){
text.split("-").join(" ");
};
});
在Angular.js中为newBie，因此，我们将不胜感激
您在过滤器函数中缺少return语句：
angular.module("myApp", [])
.controller("userDataCtrl", function($scope) {
var userData = {
firstName: "Ashish",
middleName: "",
lastName: "Toppo",
dateOfBirth: new Date(2001, 4, 8),
plan: "super-basic-plan"
}
$scope.data = userData;
})
.filter("dashed", function() {
/* this shall replace all dashes with space */
return function(text) {
// You were missing the following return
return text.split("-").join(" ");
};
});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="userDataCtrl">
<strong>First Name:</strong> {{data.firstName}} <span>(this is not filtered)</span> <br>
<strong>Last Name:</strong> {{data.lastName}} <span>(this is not filtered)</span> <br>
<hr>
<strong>First Name:</strong> {{data.firstName | uppercase}}
<span>(this is filtered to uppercase)</span> <br>
<strong>Last Name:</strong> {{data.lastName | lowercase}}
<span>(this is filtered to lowercase)</span> <br>
<hr>
<strong>plan:</strong> {{data.plan | dashed}} <span>(this is custom filtered to Dashed)</span>
<br>
</div>
</div>过滤器必须返回一个值。屏幕仅显示undefined的表示形式，它是隐式的返回值。
嗯，我可以说...将过滤器放在控制器之前：
相同的代码，仅在以下条件之前过滤：
var app = angular.module("myApp", [])
.filter("dashed", function(){
return function(text){
text.split("-").join(" ");
};
})
.controller("userDataCtrl", function($scope){
var userData = {
firstName: "Ashish",
middleName: "",
lastName: "Toppo",
dateOfBirth: new Date(2001, 4, 8),
plan: "super-basic-plan"
}
$scope.data = userData;
});<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>learn angular</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>
<body>
<div class="heading" id="heading"> {{"Hii"+" "+"There"}} </div>
<!-- the below shall display the user data -->
<div ng-controller="userDataCtrl">
<strong>First Name:</strong> {{data.firstName}} <span>(this is not filtered)</span> <br>
<strong>Last Name:</strong> {{data.lastName}} <span>(this is not filtered)</span> <br>
<hr>
<strong>First Name:</strong> {{data.firstName | uppercase}}
<span>(this is filtered to uppercase)</span> <br>
<strong>Last Name:</strong> {{data.lastName | lowercase}}
<span>(this is filtered to lowercase)</span> <br>
<hr>
<strong>plan:</strong> {{data.plan | dashed}} <span>(this is custom filtered to Dashed)</span>
<br>
</div>
</body>
</html>