AngularJs在HTML模板中單獨存儲數組和字符串

我在創建動態HTML模板時遇到了一些問題。要在表格中顯示一些數據，我必須在普通的字符串和數組之間分開。首先要做的事：HTML模板包含在另一個模板中，使用帶控制器的data-ng-include指令。控制器包含我的數據，它本質上是具有不同屬性的對象。該objcect看起來是這樣的，幷包含字符串以及數組：AngularJs在HTML模板中單獨存儲數組和字符串

$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的一種列表。

我試圖使用Array.isArray(data[attr.id])與if條款在<script>標籤內的不同變化，但沒有任何工作。在年底friends -attribute的數據應該得到一個顯示在下面，另一個在同一小區是這樣的：

Here上的jsfiddle

代碼

來源

2016-08-11 JohnDizzle

你能詳細點嗎？ –

Something [like this]（http://jsfiddle.net/Lt024p9h/3/）？所有值都轉換爲數組，然後迭代。 – kudlajz

您可以直接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

來源

2016-08-11 09:29:51 Nitish

這對我很好。我只是在人員[attr.id]'指令 – JohnDizzle

ok'。你得到你需要的東西:)'ng-repeat =「p中添加'track by $ index' 如果它的工作，然後請接受答案 – Nitish

你必須做一些腳本和HTML的變化，如果該值是這樣的更新小提琴這裏的數組：的jsfiddle。淨/ Lt024p9h/7/

來源

2016-08-11 09:35:10

做這樣的事情。

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

來源

2016-08-11 09:40:26

AngularJs在HTML模板中單獨存儲數組和字符串

回答

相關問題