All geek questions in one place

How to create a 2-dimensional comparison table in Angular JS

I am working on creating a table similar to the multiplication table: http://www.eco-pros.com/images/ClipArt-Graphics/multiplication-table.gif for some ratings.

Data will come from an API resource through a REST call using Restangular. Here is the controller code after calling REST:

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

In the view, I have a table in which I do not know how to fill it.

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

This is old code for a table in which I used two REST calls to just get alternative names and criteria names to populate the table. But I want to be able to use an array of objects that I created to populate this. And in the input fields, I want the rating to go there that meets this particular alternative and criterion (so I need something like a conditional statement to check AA or AB or AC, etc. And enter a value for this).

Example:

  A1

C1 5.0

Any advice or help would be appreciated! Thanks. I am not sure how to make this question clearer, since it is so different.

JS fiddle (not working):

http://jsfiddle.net/GkxeP/8/

+4
source share
1 answer

Final result:

http://jsfiddle.net/yUwXc/1/

I'm a little confused about what you are trying to do, for sure, but here is what I did with my violin:

  • I changed onLoad to No wrap - in <body> .

  • You had an external angular AND angular resource in the structure - this caused problems. So I got an external resource.

  • An object is declared in the controller in an area called evaluations , which has the eval property. However, in your opinion, you are trying to call rating on evaluations . Your data is not structured like that. It looks like you need alternatives in columns and criteria in rows, so we need to put your data in a format so that it can be indexed this way. In the standard case, there are column rows, so I will index the data by the criterion, and then by the alternative. For this, I wrote the following:

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

And then, in your opinion:

 <input id="#{{alternative.id}}" type="text" value="{{evaluations[criterion.name][alternative.name]}}" />

Please let me know if you need more help :)

+1
source

Source: https://habr.com/ru/post/1497767/

More articles:


All Articles