Как сделать таблицу сравнения по двум измерениям в Angular JS

Я работаю над созданием таблицы, подобной умножению. Таблица: http://www.eco-pros.com/images/ClipArt-Graphics/multiplication-table.gif для некоторых оценок.Как сделать таблицу сравнения по двум измерениям в Angular JS

Данные будут поступать из ресурса API через вызов REST с использованием Restangular. Вот код для контроллера после вызова 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"); 
});

В представлении, у меня есть таблица, в которой я не имею ни малейшего понятия, как пополнить.

<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 и т. Д. И вводить значение для этого).

Для примера:

A1 
C1-5,0

Любые советы или помощь будет оценена! Спасибо. Я не уверен, как сделать этот вопрос более ясным, поскольку он настолько отличается.

JS скрипку (не работает):

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

источник

2013-08-19 Zain

вы можете предоставить jsfiddle –

Поймал здесь скрипку, но, похоже, она не работает. Извините, я новичок в этом. http://jsfiddle.net/GkxeP/8/ – Zain

Конечный результат:

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

Я немного запутался, что вы пытаетесь точно, но вот что я сделал со своей скрипкой:

I изменено onLoad до No wrap - in <body>.
У вас был угловой внешний ресурс и угловой в рамках - это вызывало проблемы. Поэтому я достал внешний ресурс.
В вашем контроллере объявлен объект в области, называемой 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]}}" />

Пожалуйста, дайте мне знать, если вам нужно больше помощи :)

источник

2013-08-26 02:10:47

Блестящий! Это то, что мне нужно. Большое вам спасибо за вашу помощь :) – Zain

Как сделать таблицу сравнения по двум измерениям в Angular JS

ответ

Смежные вопросы