代码之家 › 专栏 › 技术社区 › Nicoleta Wilskon

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

decodeuricomponent encodeuricomponent angularjs

Nicoleta Wilskon · 技术社区 · 6 年前

我正在提交一份工作申请表,并具备以下技能 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 回复 | 直到 6 年前

Immanuel Kirubaharan 6 年前

编码成分 是一个javascript内置函数,您不能直接在AngularJS模板中访问它。把它转换成 美元范围 函数,然后尝试从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 对于上面的示例场景。

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

2 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

2 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

2 年前

jieunbi · 按日期排序数组(最新优先)

2 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

2 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前