直接在视图/html 中解码编码的值

Question

我正在提交一份招聘表格，并且拥有像C#这样的技能，这些技能在我的休息 API 中逃脱了。所以我对技能进行了编码并发送到后端。

"skills":encodeURIComponent(skills)

现在，当我恢复技能时，我正在为我的skillsdecodeURIComponent

$scope.skills = decodeURIComponent(skills);

但是这不适用于数据数组，当我想获取作业列表时，数据以数组形式出现，我的数组有近 15 个键值，它们将以某种方式在表中使用。编写一个新数组并将每个值再次推送到数组中，将解码技能推向一个大过程。

是任何直接解码视图中的值的解决方案，即html

我试过{{decodeURIComponent(item.skills) }}但没有运气。

示例数据 ：：

{
"json": {
"response": {
"statusmessage": "Success",
"count": 59,
"data": [
{
"employerId": 2,
"employerEmail": "[e-mail]",
"employerName": "SumitKumar",
"companyName": "Infosoftjoin%20pvt%20ltd.",
"jobId": 142,
"jobTitle": "Test%20case%201",
"jobDescription": "<p>ahdu%29%28@*%29*W%29%28*%29E%26%3D--%3D</p>",
"link": "http://www.infosoftjoin.in",
"numberOfPositions": 5,
"createdTime": "18-May-2018",
"lastUpdatedTime": "18-May-2018",
"consumedCredits": 44,
"location": {
"city": "North And Middle Andaman",
"state": "Andaman and Nicobar Islands",
"country": "India"
},
"skills": [
"C%23.NET"
],
"approved": 1,
"status": "Approved"
},
{
"employerId": 2,
"employerEmail": "[e-mail]",
"employerName": "SumitKumar",
"companyName": "Infosoftjoin%20pvt%20ltd.",
"jobId": 130,
"jobTitle": "New%20job",
"jobDescription": "hryuyurfkituo8",
"link": "http://www.infosoftjoin.in",
"numberOfPositions": 5,
"createdTime": "16-May-2018",
"lastUpdatedTime": "16-May-2018",
"consumedCredits": 93,
"location": {
"city": "Nicobar",
"state": "Andaman and Nicobar Islands",
"country": "India"
},
"skills": [
"APACHE TOMCAT"
],
"approved": 1,
"status": "Approved"
}
]
}
}
}

Answer 1

encodeURIComponent是一个 JavaScript 内置函数，你不能直接在 AngularJs 模板中访问它。将其转换为$scope函数，然后尝试从 AngularJs 模板访问。

我建议您使用相同的过滤器而不是$scope函数。

滤波器：

app.filter('decodeFilter', function() {
return function(input) {
return decodeURIComponent(input);
};
});

模板：

{{item.skills | decodeFilter}}

如果您仍然希望将其作为$scope函数，请尝试以下代码：

控制器：

$scope.decodeComponent=function(value){
return decodeURIComponent(value);
}

模板：

{{decodeComponent(item.skills)}}

另外，请查看此 plunker 以获取上述示例的示例场景。