直接在 view/html 中解码编码值答案

【问题标题】：Decode the encoded value directly in view/html直接在 view/html 中解码编码值
【发布时间】：2018-05-18 10:27:43
【问题描述】：

我正在提交一份职位发布表格，并且拥有 C# 之类的技能，这些技能在我的其余 API 中逃逸。所以我对技能进行编码并发送到后端。

"skills":encodeURIComponent(skills)

现在，当我恢复我正在为我的decodeURIComponent skills 做的技能时

$scope.skills = decodeURIComponent(skills);

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

有没有办法直接解码view中的值，也就是html

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

样本数据::

{
  "json": {
    "response": {
      "statusmessage": "Success",
      "count": 59,
      "data": [
        {
          "employerId": 2,
          "employerEmail": "sumit@infosoftjoin.in",
          "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": "sumit@infosoftjoin.in",
          "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"
        }

      ]
    }
  }
}

【问题讨论】：

这不能在循环或.map 调用中完成吗？能否提供样本数据？
包含样本数据
一般来说，AngularJS 框架会在$http 服务中自动percent encodes。应该没有必要使用encodeURIComponent。向我们展示将数据发送到后端的代码。

标签： angularjs encodeuricomponent decodeuricomponent

【解决方案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)}}

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

【讨论】：