gpt4 book ai didi

javascript - 为什么我的自定义过滤器无法以 Angular 方式工作,并且文本也没有出现?

转载 作者:行者123 更新时间:2023-12-02 21:32:45 25 4
gpt4 key购买 nike

我刚刚开始学习 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 的新手,因此我们将不胜感激

最佳答案

您的过滤函数中缺少 return 语句。过滤器函数的主体应如下所示:

return text.split("-").join(" ");

这是一个工作示例:

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 的表示,这是隐式返回值。

关于javascript - 为什么我的自定义过滤器无法以 Angular 方式工作,并且文本也没有出现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60579104/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com