Dynamic нг-повтора в AngularJS

Мой угловой регуляторDynamic нг-повтора в AngularJS

$scope.dyna = [ 
    { "name": "parshuram", "age": 24 }, 
    { "name": "Tejash", "age": 26 }, 
    { "name": "Vinayak", "age": 25 } 
];

Мой HTML

<table> 
    <tbody> 
    <tr ng-repeat="test in dyna"> 
    <td>{{test.name}}</td> 
    <td>{{test.age}}</td> 
    </tr> 
    </tboody> 
</table>

Это работает правильно, и выводит

Parshuram 24 
Tejash 26

Но если другая переменная добавляется моя переменная сферы, мне нужно внести изменения в таблицу html:

$scope.dyna = [ 
     { "name": "parshuram", "age": 24 ,"void": true}, 
     { "name": "Tejash", "age": 26,"void" : false } 
    ]; 

    <table> 
     <tbody> 
     <tr ng-repeat= "test in dyna"> 
     <td>{{test.name}}</td> 
     <td>{{test.age}}</td> 

     <!-- I don't want to have to add this, the columns should be added dynamically --> 
     <td>{{test.void}}</td> 
     </tr> 
     </tboody> 
    </table>

В таком случае, могут ли столбцы генерироваться динамически, например, путем получения всех моих переменных объекта из области видимости?

источник

2016-11-25 Parshuram Kalvikatte

контрольный ключ, метод значения в ng-repeat –

ng-repeat консервной над объектом key/values as well:

<table> 
    <tbody> 
    <tr ng-repeat= "test in dyna"> 
     <td ng-repeat="(key, value) in test"> 
     {{value}} 
     </td> 
    </tr> 
    </tbody> 
</table>

Однако, как указано в документации, связанных выше, существуют несколько ограничений по сравнению с ng-repeat, который работает на массивах:

Спецификация JavaScript не определяет порядок ключей , возвращенных для объекта, поэтому Angular полагается на заказ, возвращенный браузером при запуске для ключа myObj. Браузеры обычно следуют стратегии предоставления ключей в том порядке, в котором они были определены, , хотя есть исключения, когда ключи удаляются и восстанавливаются. Для получения дополнительной информации см. Страницу MDN для удаления.

ngRepeat молча проигнорирует ключи объекта, начиная с $, потому что это префикс, используемый Угловое для общественности ($) и частные ($$) свойства.

Встроенные фильтры orderBy и фильтр не работают с объектами, а выдает ошибку, если используется с одним.

источник

2016-11-25 08:14:30

Это работает, спасибо, я не беспокоюсь о порядке, этот метод, как и любое другое ограничение –

@ Parshuram Не знаю, что я знаю нет –

-2

просто сделать это снова поставить еще нг-повтора в цикле для тестовой переменной:

$scope.dyna = [{ "name": "parshuram", "age": 24 ,"void": true}, { "name": "Tejash", "age": 26,"void" : false }]; 

    <table> 
     <tbody> 
     <tr ng-repeat= "test in dyna"> 

      <td ng-repeat="t in test">{{test[t]}</td> // just like this 
     </tr> 
     </tboody> 
    </table>

источник

2016-11-25 07:58:28 user3112115

Вы должны быть в состоянии сделать это с (ключ, значение) итерации.

Было бы неплохо иметь скрипку, чтобы проверить, но будет что-то вроде: петля

<tr ng-repeat= "test in dyna"> 
    <td ng-repeat="(key,value) in test">{{value}}</td> 
</tr>

источник

2016-11-25 08:03:04 Zyga

Обратный порядок. – Feeco

Если в 'выполнения', я не знаю.В противном случае:

<div ng-controller="MyCtrl"> 
    <table> 
    <tbody> 
    <tr ng-repeat= "test in dyna"> 
     <td ng-repeat="key in objectKeys(test)">{{test[key]}}</td> 
    </tr> 
    </tbody> 
    </table> 
</div>

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

function MyCtrl($scope) { 
    $scope.dyna = [ 
     { "name": "parshuram", "age": 24 }, 
     { "name": "Tejash", "age": 26 }, 
     { "name": "Vinayak", "age": 25 } 
    ]; 

    $scope.objectKeys = function (object) { 
     var keys = Object.keys(object); 
     keys.splice(keys.indexOf('$$hashKey', 1)) 
     return keys; 
    } 

}

fiddle

источник

2016-11-25 08:47:14 Feeco

HTML

<html> 
<script src="library/angular.min.js"></script> 
<script src="practice.js"></script> 
<head> 
</head> 
<body ng-app="app"> 
<div ng-controller="test1" ng-bind-html="result"> 
</div> 
</body> 
</html>

Angularjs

angular.module('app',[]).controller('test1',['$scope','$compile','$sce',function($scope,$compile,$sce){ 
    $scope.dyna = [ 
    { "name": "parshuram", "age": 24 }, 
    { "name": "Tejash", "age": 26 }, 
    { "name": "Vinayak", "age": 25 } 
]; 
$scope.result="<table><tbody>"; 
for(var i=0;i<$scope.dyna.length;i++){ 
     $scope.result+="<tr>"; 
     for(var key in $scope.dyna[i]) 
      if($scope.dyna[i].hasOwnProperty(key)) 
       $scope.result+='<td>'+$scope.dyna[i][key]+'</td>'; 
     $scope.result+="</tr>"; 
} 
    $scope.result+="</tbody></table>"; 
    $scope.result=$sce.trustAsHtml($scope.result); 
}]);

Это еще один способ, создавая HTML в контроллере.

источник

2016-11-26 11:25:26 shahab

Нет, я не хочу этого делать Я не играю в своем контроллере, моя строка html исходит с сервера и я просто привязываюсь здесь, так что это не сработает для меня –

Это способ для создания html динамически, даже для создания html на стороне сервера. но ng-repeat - простой способ и лучше. – shahab

ответ

Смежные вопросы