Динамическое управление JSON в угловом JSON

У меня есть два массива JSON, один для заголовков, а другой для данных. Я обрабатываю заголовки, и я пытаюсь отобразить данные в отношении этих заголовков, используя вложенный ng-repeat, но это приводит к пустым строкам. Массивы JSON и html-код для отображения данных наклеены ниже.

Пожалуйста, помогите мне.

$scope.data=[{'first_name':'ruth','last_name':'vick','email':'[removed_email]','isMarried':'no','nick_name':'ruthu'},{'first_name********','last_name':'kumar','email':'[removed_email]','isMarried':'no','nick_name********'},{'first_name':'vicky','last_name':'gupta','email':'[removed_email]','isMarried':'no','nick_name':'vicky'}]

$scope.headerAll=[{'field':'first_name', 'displayName':'First name','type':'required'},{'field':'last_name', 'displayName':'Last Name','type':'required'},{'field':'email', 'displayName':'Email','type':'required'},{'field':'isMarried', 'displayName':'marital Status','type':'optional'},{'field':'nick_name', 'displayName':'Nick Name','type':'optional'}]


<div> 
 <table>
 <thead>
 <tr>
 <th ng-repeat="data in header">
 <div>{{data.displayName}}</div>
 <div>
 <button href="" ng-click="deleteColumn(data.field,$index)"><span> </span></button>
 </div>
 <div>
 <button type="button" id="dropdownMenu1" data-toggle="dropdown" ng-click="toPoint($index);">
 
 </button>
 <ul role="menu" aria-labelledby="dropdownMenu1" ng-repeat="optionalHeader in optional">
 <li role="presentation" ng-repeat="dataEdit in headerAll">{{dataEdit.displayName}}</li>
 </ul>
 </div>
 </th>
 <th><div>
 <button type="button" id="dropdownMenu1" data-toggle="dropdown">
 Add Columns
 
 </button>
 <ul role="menu" aria-labelledby="dropdownMenu1" ng-repeat="optionalHeader in optional">
 <li role="presentation" ng-repeat="optionalHeader in optional">{{optionalHeader.displayName}}</li>
 </ul>
 </div>
 </th>

 </tr>
 </thead>

 <tbody>
 <tr ng-repeat="row in data">
 <td ng-repeat="fields in headerAll">
 {{row.fields.field}}
 </td>
 </tr>
 </tbody> 
 </table>
</div>

Здесь row.fields.field создает пустые строки.

1 ответ

Попробуйте получить доступ с помощью скобок, а не оператора точки.

данные:

<div ng-repeat="obj in data">
{{ obj["first_name"]}}
{{ obj["last_name"]}}
</div>

заголовок

<div ng-repeat="obj in headerAll">
{{ obj["field"]}}
{{ obj["displayname"]}}
</div>

licensed under cc by-sa 3.0 with attribution.