javascript - 如何使用ng-repeat循环遍历对象内的数组

Question

我正在尝试(但失败了)使用数组循环遍历此对象，以按顺序在每个类别下打印技能。这是对象:

[{"category":"Accreditation","skills":["Security Operations Level 100","ServiceNow Adaptive Implementation Framework - SAIF","ServiceNow Change Management Helsinki ","ServiceNow Incident Management Geneva","ServiceNow Performance Analytics Geneva","ServiceNow Platform Core Helsinki","ServiceNow Problem Management Helsinki ","ServiceNow Service Portal Helsinki","ServiceNow Technical Best Practices"]},{"category":"Certification","skills":["BA Diploma","ITIL Intermediate Qualification: Continual Service Improvement","ITIL Intermediate Qualification: Service Design","ITIL Intermediate Qualification: Service Operation","ITIL Intermediate Qualification: Service Strategy","ITIL Intermediate Qualification: Service Transition","ITIL v3 Foundation","PRINCE2","ServiceNow Application Developer","ServiceNow Implementation Specialist","ServiceNow System Administration ","ServiceNow System Administrator"]},{"category":"Industry Vertical","skills":["Automotive","Financial Services","Government","Healthcare","Logistics","Manufacturing","Pharmaceuticals","Retail"]},{"category":"Process","skills":["Agile Methodology","Asset Management","Change Management","Configuration Management","Contract Management","Cost Management","Event Management","Field Services Management","Financial Management","GRC","Go-live Coordination","Incident Management","Knowledge Management","Managed Documents","Problem Management","Project Management","Release Management","Request Fulfilment","SDLC","Service Level Management"]},{"category":"ServiceNow Applications","skills":["Asset Management","Change Management","Configuration Management","Contract Management","Cost Management","Event Management","Field Services Management","Financial Management","GRC","HR Case Management","Incident Management","Knowledge Management","Managed Documents","On-Call Rotation","Problem Management","Project and Portfolio Management","Release Management","SDLC","Security Operations","Service Level Management","Service Portfolio Management","Service Request Catalog","ServiceWatch","Skills Management"]},{"category":"ServiceNow Development","skills":["Business Rules","Client Scripts","Script Actions","Script Includes","Studio","UI Actions","UI Macros","UI Pages","UI/Data Policies","Widgets"]},{"category":"ServiceNow Platform","skills":["API's","Access Control Lists (ACLs)","Connect","Content Management","Data model","Data sources and Import Sets","Development studio","Dictionary","Discovery","Edge Encryption","Forms and Lists","Homepages and Dashboards","Internationalisation","Mobile interface","Native reporting","Notifications","Performance Analytics","SLA Definitions","Scheduled Jobs","Service Catalog","Service Portal","Single Sign On (SSO)","Surveys and Assessments","Team Development","Transform maps/scripts","User Interface UI15","User Interface UI16","Web services","Workflows"]},{"category":"Soft Skills","skills":["Active Listening","Coaching","Collaboration","Communication","Conflict Resolution","Leading Virtual Teams","Mentoring","Negotiation","Presentation/Public Speaking","Prioritisation","Problem Solving","Risk Management ","Team Building","Time Management","Verbal Communication","Workshop Facilitation","Written Communication"]},{"category":"Special Skills","skills":["Pharmaceutical Skills"]},{"category":"Technical","skills":["AJAX","Angular","BMC Remedy","Big Data","Bootstrap","C#","CSS","Documentation Writing","Extract, Transform, Load (ETL)","HP Service Manager","HTML","Java","JavaScript","Jelly","Microsoft SQL Server","Oracle","Pentaho: Big data","PowerShell","Process Mapping","REST","Requirements Elicitation","Ruby","SOAP","SQL","Security","Service Implementation and Management (SIAM)","ServiceNow scripting ","SolarWinds","System Center Configuration Manager (SCCM)","System Center Operations Manager (SCOM)","Test Script Writing","Unix","VMWare","Wireframing/Mockups"]},{"category":"Test","skills":["Page Object Model - Automation"]}]

这是我设法让它打印出来的，但这是不可取的:

Accreditation
["Security Operations Level 100","ServiceNow Adaptive Implementation Framework - SAIF","ServiceNow Change Management Helsinki ","ServiceNow Incident Management Geneva","ServiceNow Performance Analytics Geneva","ServiceNow Platform Core Helsinki","ServiceNow Problem Management Helsinki ","ServiceNow Service Portal Helsinki","ServiceNow Technical Best Practices"]
Certification
["BA Diploma","ITIL Intermediate Qualification: Continual Service Improvement","ITIL Intermediate Qualification: Service Design","ITIL Intermediate Qualification: Service Operation","ITIL Intermediate Qualification: Service Strategy","ITIL Intermediate Qualification: Service Transition","ITIL v3 Foundation","PRINCE2","ServiceNow Application Developer","ServiceNow Implementation Specialist","ServiceNow System Administration ","ServiceNow System Administrator"]
Industry Vertical
["Automotive","Financial Services","Government","Healthcare","Logistics","Manufacturing","Pharmaceuticals","Retail"]
Process
["Agile Methodology","Asset Management","Change Management","Configuration Management","Contract Management","Cost Management","Event Management","Field Services Management","Financial Management","GRC","Go-live Coordination","Incident Management","Knowledge Management","Managed Documents","Problem Management","Project Management","Release Management","Request Fulfilment","SDLC","Service Level Management"]
ServiceNow Applications
["Asset Management","Change Management","Configuration Management","Contract Management","Cost Management","Event Management","Field Services Management","Financial Management","GRC","HR Case Management","Incident Management","Knowledge Management","Managed Documents","On-Call Rotation","Problem Management","Project and Portfolio Management","Release Management","SDLC","Security Operations","Service Level Management","Service Portfolio Management","Service Request Catalog","ServiceWatch","Skills Management"]
ServiceNow Development
["Business Rules","Client Scripts","Script Actions","Script Includes","Studio","UI Actions","UI Macros","UI Pages","UI/Data Policies","Widgets"]
ServiceNow Platform
["API's","Access Control Lists (ACLs)","Connect","Content Management","Data model","Data sources and Import Sets","Development studio","Dictionary","Discovery","Edge Encryption","Forms and Lists","Homepages and Dashboards","Internationalisation","Mobile interface","Native reporting","Notifications","Performance Analytics","SLA Definitions","Scheduled Jobs","Service Catalog","Service Portal","Single Sign On (SSO)","Surveys and Assessments","Team Development","Transform maps/scripts","User Interface UI15","User Interface UI16","Web services","Workflows"]
Soft Skills
["Active Listening","Coaching","Collaboration","Communication","Conflict Resolution","Leading Virtual Teams","Mentoring","Negotiation","Presentation/Public Speaking","Prioritisation","Problem Solving","Risk Management ","Team Building","Time Management","Verbal Communication","Workshop Facilitation","Written Communication"]
Special Skills
["Pharmaceutical Skills"]
Technical
["AJAX","Angular","BMC Remedy","Big Data","Bootstrap","C#","CSS","Documentation Writing","Extract, Transform, Load (ETL)","HP Service Manager","HTML","Java","JavaScript","Jelly","Microsoft SQL Server","Oracle","Pentaho: Big data","PowerShell","Process Mapping","REST","Requirements Elicitation","Ruby","SOAP","SQL","Security","Service Implementation and Management (SIAM)","ServiceNow scripting ","SolarWinds","System Center Configuration Manager (SCCM)","System Center Operations Manager (SCOM)","Test Script Writing","Unix","VMWare","Wireframing/Mockups"]
Test
["Page Object Model - Automation"]

这是我用来实现的 HTML:

<span ng-repeat="group in c.data.skillsAndCategories"> 
 {{group.category}}<br>
 {{group.skills}}<br>
</span>

这是我填充对象的方式:

skillsAndCategories.push({ 'category' : category, 'skills' : skills});

类别只是一个字符串，而技能是一个数组。我的目标是在每个类别下打印没有括号、引号等的技能数组。

帮助将不胜感激!谢谢。

Answer 1

你应该使用两个 ng-repeats，因为你有两个数组。

<span ng-repeat="group in c.data.skillsAndCategories"> 
  {{group.category}}
  <span ng-repeat="skills in group.skills"> 
    {{skills}}
  </span>
</span>