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

时间:2018-05-18 10:27:43

标签: angularjs encodeuricomponent decodeuricomponent

我正在提交一份工作发布表单,并且具有C#等技能,这些技能可以在我的其余API中转义。所以我编码技能并发送到后端。

"skills":encodeURIComponent(skills)

现在当我恢复我decodeURIComponent

所做的技能skills
$scope.skills = decodeURIComponent(skills);

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

是否有任何解决方案直接解码视图中的值,即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"
        }

      ]
    }
  }
}

1 个答案:

答案 0 :(得分: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示例场景。