如何在角度js中打印json对象和数组值？

My app.js look like

我的app.js看起来像

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
$scope.eventmetrics = [
                        { 
                          _id: '57d439cf666a8d1080003e90',
                           firstName: [ 'name', 'text' ],
                           lastName: [ 'last', 'text' ],
                           taginvitations: ['first,second,third', 'text'],
                           userId: 1,
                           tagcontact: ['file,second,third,fourth', 'text'] 
                         }
                     ]
     });

i want print array of tag1 and tag2 in list example

我想在列表示例中打印tag1和tag2的数组

invitations

first
second
thrid

contact

first
second
thrid
fourth

3 个解决方案

#1

According to the contents of the array tag1: ['first, second, third', 'text'], tag1 contains only two elements, then you must separate the content of the first element to obtain a new matrix that you need to present.

根据数组tag1的内容:['first,second,third','text'],tag1只包含两个元素,然后必须分离第一个元素的内容以获得需要呈现的新矩阵。

Use: tag1[0].split(',').

This demo works with more than one element in the matrix eventmetrics.

此演示适用于矩阵eventmetrics中的多个元素。

Something like this:

像这样的东西:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.eventmetrics = [{
    _id: '57d439cf666a8d1080003e90',
    firstName: ['name', 'text'],
    lastName: ['last', 'text'],
    tag1: ['first,second,third', 'text'],
    userId: 1,
    tag2: ['file,second,third,fourth', 'text']
  }, {
    _id: '87d439cf666a8d1080003e55',
    firstName: ['name', 'text'],
    lastName: ['last', 'text'],
    tag1: ['first,second,third', 'text'],
    userId: 1,
    tag2: ['file,second,third,fourth, fifth', 'text']
  }]
});

#metrics {
  border: solid 1px #f00;
  margin: 2px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="plunker">
  <div ng-controller="MainCtrl">
    <div id="metrics" ng-repeat="em in eventmetrics">
      <h3 ng-bind="('_id: ' + em._id)"></h3>

      <div>
        <h4>tag1</h4>

        <ul>
          <li ng-repeat="tag1 in em.tag1[0].split(',')" ng-bind="tag1"></li>
        </ul>
      </div>
      <div>
        <h4>tag2</h4>

        <ul>
          <li ng-repeat="tag2 in em.tag2[0].split(',')" ng-bind="tag2"></li>
        </ul>
      </div>
    </div>
  </div>
</div>

#2

Assuming the eventmetrics is always have length == 0, you can something like this using ng-repeat:

假设eventmetrics总是长度== 0,你可以使用ng-repeat这样的东西:

<ul>
  <li ng-repeat="text in eventmetrics[0].tag1"> {{ text }} </li>
</ul>


<ul>
  <li ng-repeat="text in eventmetrics[0].tag2"> {{ text }} </li>
</ul>

#3

Check out the complete code in Plunker:

查看Plunker中的完整代码:

https://plnkr.co/edit/3TLG27?p=preview

<!DOCTYPE html>
<html ng-app="plunker">
 <head>
  <link rel="stylesheet" href="style.css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  <script src="script.js"></script>
 </head>
 <body ng-controller="MainCtrl">
   <ul ng-repeat="y in eventmetrics">
    <div ng-repeat="(key,value) in y" ng-show="key=='contact'||key=='invitation'">
    <b>{{key}}</b>
     <li ng-repeat="x in value[0].split(',')">
      {{x}}  
     </li>
    </div>
   </ul>
 </body>
</html>

//script.js

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.eventmetrics = [
                    { 
                      _id: '57d439cf666a8d1080003e90',
                       firstName: [ 'name', 'text' ],
                       lastName: [ 'last', 'text' ],
                       invitation : ['first,second,third', 'text'],
                       userId: 1,
                       contact: ['file,second,third,fourth', 'text'] 
                     }
                 ];
    });

#1