Question

我的角度控制器是

style.css

我的HTML

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

这可以正常工作，并输出

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

但是如果另一个变量被添加到我的范围变量中，我需要在我的html表中进行更改：

Parshuram 24
Tejash    26

在这种情况下，是否可以动态生成列，例如从范围中获取所有对象变量？

Answer 1

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中运行key时的浏览器。浏览器通常遵循   按照定义顺序提供密钥的策略，   虽然删除和恢复密钥时会有例外情况。   有关详细信息，请参阅删除的MDN页面。



ngRepeat会默默忽略以$开头的对象键，因为   它是Angular用于公共（$）和私有（$$）的前缀   属性。



内置过滤器orderBy和filter不适用于对象，和   如果与其一起使用，将抛出错误。

Answer 2

你应该可以用（键，值）迭代来做到这一点。

很高兴有小提琴来验证，但会是这样的：

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

Answer 3

如果在'运行时'，我不知道。否则：

<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

Answer 4

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。

Answer 5

只需再次在循环中为测试变量添加另一个ng-repeat：

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

AngularJS中的动态ng-repeat

5 个答案: