Javascript AngularJS中的动态ng重复_Javascript_Angularjs_Angularjs Ng Repeat

Javascript AngularJS中的动态ng重复

javascript angularjs

Javascript AngularJS中的动态ng重复,javascript,angularjs,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Ng Repeat,我的角度控制器是 $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}}&l

我的角度控制器是

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

但是，如果将另一个变量添加到我的范围变量中，我需要在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>

$scope.dyna=[
{“姓名”：“帕舒拉姆”，“年龄”：24，“无效”：真实}，
{“姓名”：“Tejash”，“年龄”：26，“无效”：假}
];
{{test.name}
{{test.age}
{{test.void}

在这种情况下，可以动态生成列吗？例如，通过从范围中获取所有my object变量？

只需再次进行，然后在测试变量的循环中重复另一个ng：

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

$scope.dyna=[{“name”：“parshuram”，“age”：24，“void”：true}，{“name”：“Tejash”，“age”：26，“void”：false}]；
{{test[t]}//就像这样

您应该能够通过（键、值）迭代来实现这一点

最好有小提琴来验证，但应该是：

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


{{value}}

可以在对象上循环：


{{value}}

但是，正如上面链接的文档所述，与在阵列上工作的

ng repeat

相比，存在一些限制：

JavaScript规范没有定义键的顺序为对象返回，因此Angular依赖于在myObj中运行键时使用浏览器。浏览器通常遵循按定义顺序提供密钥的策略，尽管在删除和恢复密钥时也有例外。有关更多信息，请参阅删除上的MDN页面
ngRepeat将自动忽略以$开头的对象键，因为它是Angular用于public（$）和private（$）的前缀财产
内置过滤器orderBy和filter不适用于对象，以及如果与一个一起使用，将抛出一个错误

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

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

HTML

安格拉斯

angular.module（'app'，[]）.controller（'test1'，['$scope'，'$compile'，'$sce'，function（$scope，$compile，$sce）{
$scope.dyna=[
{“姓名”：“帕舒拉姆”，“年龄”：24}，
{“姓名”：“Tejash”，“年龄”：26}，
{“姓名”：“维纳亚克”，“年龄”：25}
];
$scope.result=“”；
对于（var i=0；icheck键，值方法的顺序相反。它可以工作，谢谢我不担心顺序，这个方法和其他方法一样吗limitation@Parshuram我不知道noNo我不想这样做我没有在我的控制器中玩，我的html字符串来自服务器，我只是在这里绑定，所以这对methis不起作用这是c的一种方式动态创建html，甚至在服务器端创建html。但ng repeat是一种简单且更好的方法。
<table>
  <tbody>
    <tr ng-repeat= "test in dyna">
      <td ng-repeat="(key, value) in test">
        {{value}}
      </td>
     </tr>
  </tbody>
</table>

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

}

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

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);
}]);