Проблемы совмещения Angular и Datatables
Всем привет!
Может кто-нибудь с такой проблемой сталкивался или сможет указать, что я неверно делаю. Проблема такая: Для отображения таблицы и работы с ней (paging, filter, order и т.п.) использую плагин Datatables (http://www.datatables.net/) .row(ng-controller="MyController")
.col-xs-12
table#example.table.table-striped(cellspacing='0', width='100%')
thead
tr
th #
th Дата
th Задача
th Тип задачи
th Статус
th Очередь
tfoot
tr
th #
th Дата
th Задача
th Тип задачи
th Статус
th Очередь
tbody
tr(ng-repeat="row in rowCollection")
td {{row.issue_id}}
td {{row.date_issue}}
td {{row.issue_text}}
td {{row.group_of_support}}
td {{row.issue_status}}
td {{row.issue_queue}}
script(type='text/javascript').
$(document).ready(function () {
$('#example').DataTable();
});
В контроллере пока что просто передаю небольшой набор данных: Код:
$scope.rowCollection = [вместо данных я лишь вижу свои переменные {{row.issue_id}} и .т.д. Надеюсь на помощь! |
Цитата:
|
Цитата:
Angular должен сам данные запрашивать у сервера. Тогда и вид будет меняться, соответственно данным модели. |
Цитата:
|
Цитата:
Если какая-то другая "сила" начнет менять внешнее представление - будет некая фигня. В твоем случае вот такая. Цитата:
|
Цитата:
Вот пример из "обучения" как это нужно делать http://angular.ru/tutorial/step_04 |
Цитата:
|
uuushka, вот как это должно работать в angular
<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
#order_info > span {
font-weight: bold;
}
.order-name {
color: blue;
cursor: pointer;
}
.order-name:hover {
color: red;
}
</style>
<script type='text/javascript'>
function MyController($scope){
$scope.orderField='issue_id';
$scope.newOrder=function(Name){
$scope.orderField=Name;
};
$scope.rowCollection = [
{
issue_id: 2545,
date_issue: new Date('2015-08-26'),
issue_text: 'Не работает кнопка',
group_of_support: '2',
issue_status: 'В процессе',
issue_queue: '0'
},
{
issue_id: 6581,
date_issue: new Date('2015-08-27'),
issue_text: 'не работает сервер',
group_of_support: '3',
issue_status: 'Новая',
issue_queue:'2'
},
{
issue_id: 54885,
date_issue: new Date('2015-08-27'),
issue_text: 'Зависла программа',
group_of_support: '5',
issue_status: 'Отложена',
issue_queue: '4'
}
]
};
</script>
</head>
<body ng-controller="MyController">
<p id='order_info'>Сейчас сортировка по полю <span>{{orderField}}</span></p>
<table>
<thead>
<tr>
<th ng-click='newOrder("issue_id")' class='order-name'>#</th>
<th ng-click='newOrder("date_issue")' class='order-name'>Дата</th>
<th>Задача</th>
<th>Тип задачи</th>
<th>Статус</th>
<th>Очередь</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection| orderBy: orderField">
<td>{{row.issue_id}}</td>
<td>{{row.date_issue}}<td>
<td>{{row.issue_text}}<td>
<td>{{row.group_of_support}}<td>
<td>{{row.issue_status}}<td>
<td>{{row.issue_queue}}<td>
</tr>
</tbody>
</table>
</body>
</html>
|
спасибоу))
|
uuushka, меня поперло! :D
<!DOCTYPE html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
#order_info > span {
font-weight: bold;
}
.order-name {
color: blue;
cursor: pointer;
}
.order-name:hover {
color: red;
}
</style>
<script type='text/javascript'>
function MyController($scope){
$scope.orderField='issue_queue';
$scope.newOrder=function(Name){
$scope.orderField=Name;
};
$scope.rowCollection = [
{
issue_id: 2545,
date_issue: new Date('2015-08-26'),
issue_text: 'Не работает кнопка',
group_of_support: '2',
issue_status: 'В процессе',
issue_queue: '0'
},
{
issue_id: 6581,
date_issue: new Date('2015-08-27'),
issue_text: 'не работает сервер',
group_of_support: '3',
issue_status: 'Новая',
issue_queue:'2'
},
{
issue_id: 54885,
date_issue: new Date('2015-08-27'),
issue_text: 'Зависла программа',
group_of_support: '5',
issue_status: 'Отложена',
issue_queue: '4'
}
]
$scope.status=[
'Новая',
'В процессе',
'Отложена',
'Завершена'
];
};
</script>
</head>
<body ng-controller="MyController">
<p id='order_info'>Сейчас сортировка по полю <span>{{orderField}}</span></p>
<table border='1'>
<thead>
<tr>
<th ng-click='newOrder("issue_id")' class='order-name'>#</th>
<th ng-click='newOrder("date_issue")' class='order-name'>Дата</th>
<th>Задача</th>
<th>Тип задачи</th>
<th ng-click='newOrder("issue_status")' class='order-name'>Статус</th>
<th ng-click='newOrder("issue_queue")' class='order-name'>Очередь</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection| orderBy: orderField">
<td>{{row.issue_id}}</td>
<td>{{row.date_issue}}</td>
<td>{{row.issue_text}}</td>
<td>{{row.group_of_support}}</td>
<td>
<select ng-model="row.issue_status">
<option ng-repeat='i in status' >{{i}}</option>
</select>
</td>
<td><input ng-model='row.issue_queue' value={{row.issue_queue}} /></td>
</tr>
</tbody>
</table>
</body>
</html>
Начальство приказало изучать angular... Т.ч. нужно тренироваться! |
| Часовой пояс GMT +3, время: 18:29. |