我正在尝试 AngularJS 中的一些事件，想知道是否可以动态创建一个表，只使用表头的 ng-repeat、行的 ng-repeat 和行中的字段的 ng-repeat？
基本上我想说“对于存在于对象实例中的每个属性，打印一个新的 <\th>，对于存在于 myArray 中的每个对象，打印一个新的 <\tr>，并为每个存在于每个对象的每个实例中的属性，在每一行中，打印一个新的 <\td>。
这是我的 Controller :
var app=angular.module("app04",[]);
app.controller("Controller1",function(){
this.name="ABCDEFGH";
this.objectArray=[{name:"Jane Doe", email:"Jane@gmail.com",
phoneModel:"LG Optimus S", status:"sad",purchaseDate:"2015-12-01"
},{name:"John Doe", email:"John@gmail.com",
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:"Jane@gmail.com",
phoneModel:"LG Optimus S", status:"sad",purchaseDate:"2015-12-01"
},{name:"John Doe", email:"John@gmail.com",
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>
但我现在将引用来自 this link 的 ng-repeat 文档:
The JavaScript specification does not define the order of keys returned for an object, so Angular relies on the order returned by the browser when running for key in myObj. Browsers generally follow the strategy of providing keys in the order in which they were defined, although there are exceptions when keys are deleted and reinstated. See the MDN page on delete for more info.
这基本上意味着标题中列的顺序不能保证与您期望的数据列的顺序相同:
<td>{{object.name}}</td>
<td>{{object.email}}</td>
<td>{{object.phoneModel}}</td>
<td>{{object.status}}</td>
<td>{{object.purchaseDate}}</td>
例如，如果您这样定义 con1.objectArray[0]:
{
email:"Jane@gmail.com",
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 哪个比第一个示例更好，因为它适用于所有浏览器，前提是您遵循粗体文本的约束。
但最安全的方法是您只需在 Controller 中定义一个数组中的列(属性名称)，以保证在所有浏览器上的顺序:
app.controller("Controller1",function(){
this.name="ABCDEFGH";
this.objectArray=[{name:"Jane Doe", email:"Jane@gmail.com",
phoneModel:"LG Optimus S", status:"sad",purchaseDate:"2015-12-01"
},{name:"John Doe", email:"John@gmail.com",
phoneModel:"iphone 6s", status:"happy",purchaseDate:"2016-12-05"
},{email:"John@gmail.com", 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>
关于javascript - 如何在 Javascript/AngularJS 中动态设置 foo 等于对象属性名称？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36550651/