AngularJs在HTML模板中分离数组和字符串答案

【问题标题】：AngularJs seperate array and string in HTML templateAngularJs在HTML模板中分离数组和字符串
【发布时间】：2016-12-17 22:20:30
【问题描述】：

我在创建动态 HTML 模板时遇到了一点问题。要在表格中显示一些数据，我必须将普通字符串和数组分开。首先要做的事：HTML 模板包含在另一个模板中，使用带有控制器的 data-ng-include 指令。控制器包含我的数据，它本质上是一个具有不同属性的对象。对象看起来像这样，包含字符串和数组：

$scope.data = {
    name: 'tony',
    city: 'New York',
    friends: ['Ann', 'Ben', 'John Doe'],
    postal: 12345
};

还有一个与属性匹配的数组来动态解析信息。

$scope.attributes = [{name: "Name", id: 'name'},
                {name: "City", id: 'city'},
                {name: "Friends", id: 'friends'},
                {name: "Postal-code", id: 'postal'}
                ];

data 使用以下代码在 HTML 内进行解析：

<table class="table table-striped">        
    <tbody>
      <tr ng-repeat="attr in attributes">
        <td>{{attr.name}}</td>
        <td>{{data[attr.id]}}</td>
      </tr>
    </tbody>
  </table>

这对字符串来说绝对有效，但我必须以某种方式确定data 的属性是否是一个数组，以在记录上使用ng-repeat 显示一种列表中的单个记录。

我尝试在<script>-tags 内部的不同变体中使用Array.isArray(data[attr.id]) 和if-子句，但没有任何效果。最后，friends-attribute 的数据应该显示在同一单元格中，如下所示：

Here是JsFiddle上的代码

【问题讨论】：

你能详细说明吗？
某事like this?所有值都转换为数组，然后迭代。

标签： javascript jquery html angularjs arrays

【解决方案1】：

你可以 isArray 但不能直接在 ng-show 中。

你可以这样使用它。

 $scope.isArray = angular.isArray;

这样，

 <tr ng-repeat="person in persons">
   <td ng-repeat="attr in query.attribs">
     <span ng-show="isArray(person[attr.id])">
       <span ng-repeat="p in person[attr.id]">
          {{p}}
       </span>
     </span>
     <span ng-show="!isArray(person[attr.id])">
       {{person[attr.id]}}
     </span>
   </td>
</tr>

这是您更新后的Fiddle

【讨论】：

这对我很有用。我只需要将track by $index 添加到ng-repeat ="p in person[attr.id] 指令
好的。你得到了你需要的东西:)如果它工作那么请接受答案

【解决方案2】：

如果值是这样的数组，则必须进行一些脚本和 html 更改此处更新小提琴：jsfiddle.net/Lt024p9h/7/

【讨论】：

【解决方案3】：

做这样的事情。

<tr ng-repeat="person in persons">
   <td ng-repeat="attr in query.attribs">
     <span ng-show="isArray(person[attr.id])">
       {{person[attr.id].toString()}}  
     </span>
     <span ng-show="!isArray(person[attr.id])">
       {{person[attr.id]}}
     </span>
   </td>
</tr>

【讨论】：