我正在尝试AngularJS中的一些活动，想知道是否有可能仅使用ng-repeat表示表头，使用ng-repeat表示行，而使用ng-repeat表示行中的字段来动态创建表？
本质上，我想说：“对于对象实例中存在的每个属性，打印一个新的<\ th>，对于myArray中存在的每个对象，打印一个新的<\ tr>，以及每个存在的属性在每个对象的每个实例的每一行中，打印新的<\ td>。
这是我的控制器：
var app=angular.module("app04",[]);
app.controller("Controller1",function(){
this.name="ABCDEFGH";
this.objectArray=[{name:"Jane Doe", email:"[email protected]",
phoneModel:"LG Optimus S", status:"sad",purchaseDate:"2015-12-01"
},{name:"John Doe", email:"[email protected]",
phoneModel:"iphone 6s", status:"happy",purchaseDate:"2016-12-05"
}];
})
这是身体：
<body>
<h1>Hello Angular!</h1>
<div ng-controller="Controller1 as con1">
<table>
<theader>
<tr>
<th ng-repeat="object in con1.objectArray[0]">
{{Object.getOwnPropertyName(object)}}</th>
</tr>
</theader>
<tbody>
<tr ng-repeat="object in con1.objectArray">
<td>{{object.name}}</td>
<td>{{object.email}}</td>
<td>{{object.phoneModel}}</td>
<td>{{object.status}}</td>
<td>{{object.purchaseDate}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
由于这是一个非常基础的教程（我只看了第4个视频），所以我被指示写出标题，但是对于重用性来说，尝试一个小的思考挑战并看是否有可能看起来更方便和更好。做类似我上面尝试的事情。
问题在于，Object.getOwnPropertyName和Object.keys似乎无法与此JavaScript一起使用，因此我想知道自己是否做得不正确，或者是否有更好的方法来做到这一点。我还想知道社区中关于在我知道所有对象都将包含相同属性的情况下动态创建所有内容的想法？
您可以这样做的一种方式是这样的：
var app=angular.module("app04",[]);
app.controller("Controller1",["$scope", function($scope){
this.name="ABCDEFGH";
this.objectArray=[{name:"Jane Doe", email:"[email protected]",
phoneModel:"LG Optimus S", status:"sad",purchaseDate:"2015-12-01"
},{name:"John Doe", email:"[email protected]",
phoneModel:"iphone 6s", status:"happy",purchaseDate:"2016-12-05"
}];
}]);
<body>
<h1>Hello Angular!</h1>
<div ng-controller="Controller1 as con1">
<table>
<theader>
<tr>
<th ng-repeat="(key,value) in con1.objectArray[0]">
{{key}}</th>
</tr>
</theader>
<tbody>
<tr ng-repeat="object in con1.objectArray">
<td>{{object.name}}</td>
<td>{{object.email}}</td>
<td>{{object.phoneModel}}</td>
<td>{{object.status}}</td>
<td>{{object.purchaseDate}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
但是我现在将引用此链接中的ng-repeat文档：
JavaScript规范没有定义为对象返回的键的顺序，因此Angular依赖于在myObj中为键运行时浏览器返回的顺序。浏览器通常遵循按定义顺序提供密钥的策略，尽管在删除和恢复密钥后会有例外。有关更多信息，请参阅“删除”上的“ MDN”页面。
这基本上意味着，不能保证标题中的列顺序与您期望的数据列的顺序相同：
<td>{{object.name}}</td>
<td>{{object.email}}</td>
<td>{{object.phoneModel}}</td>
<td>{{object.status}}</td>
<td>{{object.purchaseDate}}</td>
例如，如果您这样定义con1.objectArray[0]：
{
email:"[email protected]",
name:"Jane Doe",
phoneModel:"LG Optimus S",
status:"sad",
purchaseDate:"2015-12-01"
}
在大多数浏览器上，中的列顺序thead将不同于预期的顺序，email第一列将是顺序，然后依次name类推...
但是，如果您知道所有对象都将以相同的顺序定义，并且没有删除属性或执行任何其他可能影响对象中属性顺序的操作，则可以执行以下操作：
<table>
<theader>
<tr>
<th ng-repeat="(key,val) in con1.objectArray[0]">{{key}}</th>
</tr>
</theader>
<tbody>
<tr ng-repeat="object in con1.objectArray">
<td ng-repeat="(key,val) in object">{{object[key]}}</td>
</tr>
</tbody>
</table>
IMO比第一个示例好，因为只要遵循加粗文本的约束，它将在所有浏览器中都可以使用。
但是最安全的方法是，您可以在数组中的控制器中简单定义列（属性名称），以保证所有浏览器的顺序：
app.controller("Controller1",function(){
this.name="ABCDEFGH";
this.objectArray=[{name:"Jane Doe", email:"[email protected]",
phoneModel:"LG Optimus S", status:"sad",purchaseDate:"2015-12-01"
},{name:"John Doe", email:"[email protected]",
phoneModel:"iphone 6s", status:"happy",purchaseDate:"2016-12-05"
},{email:"[email protected]", name:"John Doe",
phoneModel:"iphone 6s", status:"happy",purchaseDate:"2016-12-05"
}];
this.columns = Object.getOwnPropertyNames(this.objectArray[0]); // or you can do it manually with array ['name', 'email', ...]
});
然后用HTML
<div ng-controller="Controller1 as con1">
<table border="1">
<theader>
<tr>
<th ng-repeat="col in con1.columns">{{col}}</th>
</tr>
</theader>
<tbody>
<tr ng-repeat="object in con1.objectArray">
<td ng-repeat="col in con1.columns">{{object[col]}}</td>
</tr>
</tbody>
</table>
</div>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句