0

Есть данные в виде:

var tag = function(title, color) {
    return { 
        title: title,
        color: color
        };
    },row = function(title, date, location, trainer, places, tags){
    return { 
        title: title,
        date: date,
        location: location,
        trainer: trainer,
        places: places,
        tags: tags
    }
};

$scope.tags1 = [
            tag("#java", "info"),
            tag("#c++", "default")
        ];
$scope.tags2 = [
            tag("#js", "danger")
        ];
$scope.tags3 = [
            tag("#sql", "success")
        ];

$scope.rows = [
            row("Back-end", "25.05.2012", "234", "Yaroshevich", "12/15", $scope.tags1),
            row("Front-end", "28.05.2014", "243", "Shchaurouski", "10/15", $scope.tags2),
            row("SQL", "05.08.1999", "145", "Romashko", "1/15", $scope.tags3),
        ];

Необходимо отобразить их в виде таблицы:

<tbody>
     <tr>
         <td></td>
         ...
     </tr>
</tbody>

Вот как делаю я:

Контроллер

$scope.tableRows = $scope.rows.map(function(row) {
    var html = "<td>" + row.title + "</td>" + "<td>" + row.date + "</td>" + "<td>" + row.location + "</td>" + "<td>" + row.trainer + "</td>" + "<td>" + row.places + "</td>";
    var s = $sce.trustAsHtml(html);
    return s;
});

html

<tbody>
    <tr ng-repeat="row in rows">
         <p ng-bind-html="tableRows[$index]"></p>
    </tr>
</tbody>

Вопрос: что не так, и что сделать, чтобы было так?

1
  • 1
    Как минимум у Вас "что-то не то" в методе map происходит. Вы куда-то передаете html, при этом в самой функции эта переменная создается каждый раз сначала. И ещё очень странно, что Вы пытаетесь куда-то вернуть s... Ну и такой код принято в директивы писать.
    – vas
    14 июл 2015 в 16:48

2 ответа 2

1

Да всё не так. Надо не html в контроллере собирать, а использовать ng-repeat и нужный шаблон в разметке.

0

Отвечающие были правы: "Все не так". Решил использовать ng-table https://github.com/esvit/ng-table . Предельно простая директива. Привожу пример кода:

<table ng-class="'table table-bordered table-striped table-hover'" ng-table>
                        <tr ng-repeat="training in trainings">
                            <td data-title="'Title'">{{training.title}}</td>
                            <td data-title="'Date'">{{training.date}}</td>
                            <td data-title="'Location'">{{training.location}}</td>
                            <td data-title="'Trainer name'">{{training.trainerName}}</td>
                            <td data-title="'Places'">{{training.places}}</td>
                            <td data-title="'Tags'">{{training.tags}}</td>
                        </tr>
                    </table>

И js (с зависимостью ngTable):

 $scope.trainings = [{
    title: 'Front-end',
    date: '5 May 2015',
    location: '243',
    trainerName: 'Shchaurouski',
    places: '10/15',
    time: '14:00',
    tags: 'java js'
}, {
    title: 'Front-end',
    date: '5 Jan 2015',
    location: '243',
    trainerName: 'Shchaurouski',
    places: '10/15',
    time: '14:00',
    tags: 'java js'
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.