Question

我的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'] 
                         }
                     ]
     });

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

邀请

第一
第二
THRID

与

第一
第二
thrid
第四

Answer 1

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

使用：tag1[0].split(',')。

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

这样的事情：

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>

Answer 2

假设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>

Answer 3

查看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'] 
                     }
                 ];
    });

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

3 个答案: