我正在创建一个类似于乘法表的表格:http://www.eco-pros.com/images/ClipArt-Graphics/multiplication-table.gif进行一些评估。
数据将通过使用 Restangular 的 REST 调用来自 API 资源。这是 REST 调用后 Controller 的代码:
getEvaluations.getList("evaluations?searchBy[participant]=880b6fb0-ee34-11e2-a62e-19e0bcac9427").then(function(data){
evals = data["_embedded"]["items"];
for (i = 0; i < evals.length; i++){
allEvals.push({
rating: evals[i].rating,
alternative: evals[i]["_embedded"]["alternative"].name,
criterion: evals[i]["_embedded"]["criterion"].name
});
/* I'm creating an array of objects to parse the data that comes from the
resource because the back-end is a bit messy. */
}
console.log(allEvals);
$scope.evaluations = {
eval: allEvals
};
$scope.projectID = $routeParams["projectID"];
}, function error (err){
alert("Error in fetching resource");
console.log("error");
});
在 View 中，我有一张我不知道如何填写的表格。
<table>
<thead>
<tr>
<th></th>
<th data-ng-repeat="alternative in alternatives">{{alternative.name}}</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="criterion in criteria">
<td><b>{{criterion.description}}</b></td>
<td><input type="text" value="{{evaluations.rating}}" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
这是表的旧代码，我在其中使用两个 REST 调用来获取替代名称和标准名称来填充表。但我希望能够使用我创建的对象数组来填充它。在输入框中，我希望评分符合特定的选择和标准(所以我需要类似条件语句的东西来检查 AA 或 AB 或 AC 等并为其注入(inject)值)。
例如:
A1C1 5.0
任何提示或帮助将不胜感激!谢谢。我不确定如何让这个问题更清楚，因为它是如此不同。
JS fiddle (不工作):
最佳答案
最终结果:
我对你想做什么有点困惑，确切地说，这是我对你的 fiddle 所做的:
我改变了
onLoad至No wrap - in <body>.您在框架中有一个 Angular 外部资源和 Angular - 这导致了问题。所以我把外部资源拿出来了。
在您的 Controller 中，在范围内声明了一个对象
evaluations有一个名为eval的属性.但是，在您看来，您尝试调用rating在evaluations.您的数据的结构不是这样的。看起来您想要列中的替代项和行中的标准，因此我们需要将您的数据置于一种格式中，以便可以以这种方式对其进行索引。有几行列是很常见的，所以我会让数据按标准索引，然后按备选索引。为此，我编写了以下内容:$scope.evaluations = {}; for (var i = 0; i < allEvals.length; i++) { if (!$scope.evaluations.hasOwnProperty(allEvals[i].criterion)) { $scope.evaluations[allEvals[i].criterion] = {}; } $scope.evaluations[allEvals[i].criterion][allEvals[i].alternative] = allEvals[i].rating; }
然后在你看来:
<input id="#{{alternative.id}}" type="text" value="{{evaluations[criterion.name][alternative.name]}}" />
如果您需要更多帮助，请告诉我:)
关于javascript - 如何在 Angular JS 中制作二维比较表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18311048/