Сортировка не работает в смарт-таблице угловой JS -- javascript поле с участием angularjs поле с участием smart-table пол Связанный проблема

Sorting is not working in smart table angular js


0
vote

проблема

русский

Сортировка смарт-таблицы не работает по какой-то причине после использования в качестве пользовательской директивы. Можете ли вы помочь мне, что я сделал не так?

Мой код http://plnkr.co/edit/mzpifiat0rtdd63riyjsi?p=preview

Вот мой вид, HTML и код JS:

<Сильные> Просмотр

 <код> <div ng-controller="ctrl1 as one">     <ltcg-table options="one.rowCollection"></ltcg-table>     </div> <div ng-controller="ctrl2 as two">     <ltcg-table options="two.rowCollection"></ltcg-table>    </div>   

<Сильная> Сетка HTML

 <код> <table st-table="rowCollection" class="table table-striped">     <thead>         <tr>             <th st-sort="getters.firstName">first name</th>             <th st-sort="lastName">last name</th>             <th st-sort="birthDate">birth date</th>             <th st-sort="balance">balance</th>             <th>email</th>         </tr>     </thead>     <tbody>         <tr ng-repeat="row in options">             <td>{{row.firstName}}</td>             <td>{{row.lastName}}</td>             <td>{{row.birthDate}}</td>             <td>{{row.balance}}</td>             <td>{{row.email}}</td>         </tr>     </tbody> </table>   

<Сильные> js

 <код> (function () {       var myApp = angular.module('myApp', ['smart-table']);        function one() {                          this.rowCollection = [               {firstName: 'Laurent', lastName: 'Renard', birthDate: 4, balance: 102, email: 'whatever@gmail.com'},               {firstName: 'Blandine', lastName: 'Faivre', birthDate: 5, balance: -2323.22, email: 'oufblandou@gmail.com'},               {firstName: 'Francoise', lastName: 'Frere', birthDate: 4, balance: 42343, email: 'raymondef@gmail.com'}           ];           //alert($scope.gridOptions.columnDefs[1].name);           //alert($scope.gridOptions);       };         function two() {                this.rowCollection = [               {firstName: 'test2', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},               {firstName: 'test2', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},               {firstName: 'test2', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}           ];           //alert($scope.gridOptions.columnDefs[1].name);           //alert($scope.gridOptions);       };        myApp.directive('ltcgTable', function() {           return {               restrict: 'E',               transclude: true,               scope: {                 'options': '='               },               templateUrl: "ltcg-table.html",               link: function(scope, element, attr) {                                           scope.rowCollection = scope.options;               }           }                   });      myApp.controller('ctrl1', one)      myApp.controller('ctrl2', two) })();   
Английский оригинал

Smart table sorting is not working for some reason after using as custom directive. Can you help me what I did wrong?

My code http://plnkr.co/edit/mzPifIAT0RTd63rIYJsi?p=preview

Here is my view, HTML and js Code:

View

<div ng-controller="ctrl1 as one">     <ltcg-table options="one.rowCollection"></ltcg-table>     </div> <div ng-controller="ctrl2 as two">     <ltcg-table options="two.rowCollection"></ltcg-table>    </div> 

Grid HTML

<table st-table="rowCollection" class="table table-striped">     <thead>         <tr>             <th st-sort="getters.firstName">first name</th>             <th st-sort="lastName">last name</th>             <th st-sort="birthDate">birth date</th>             <th st-sort="balance">balance</th>             <th>email</th>         </tr>     </thead>     <tbody>         <tr ng-repeat="row in options">             <td>{{row.firstName}}</td>             <td>{{row.lastName}}</td>             <td>{{row.birthDate}}</td>             <td>{{row.balance}}</td>             <td>{{row.email}}</td>         </tr>     </tbody> </table> 

js

(function () {       var myApp = angular.module('myApp', ['smart-table']);        function one() {                          this.rowCollection = [               {firstName: 'Laurent', lastName: 'Renard', birthDate: 4, balance: 102, email: 'whatever@gmail.com'},               {firstName: 'Blandine', lastName: 'Faivre', birthDate: 5, balance: -2323.22, email: 'oufblandou@gmail.com'},               {firstName: 'Francoise', lastName: 'Frere', birthDate: 4, balance: 42343, email: 'raymondef@gmail.com'}           ];           //alert($scope.gridOptions.columnDefs[1].name);           //alert($scope.gridOptions);       };         function two() {                this.rowCollection = [               {firstName: 'test2', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},               {firstName: 'test2', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},               {firstName: 'test2', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}           ];           //alert($scope.gridOptions.columnDefs[1].name);           //alert($scope.gridOptions);       };        myApp.directive('ltcgTable', function() {           return {               restrict: 'E',               transclude: true,               scope: {                 'options': '='               },               templateUrl: "ltcg-table.html",               link: function(scope, element, attr) {                                           scope.rowCollection = scope.options;               }           }                   });      myApp.controller('ctrl1', one)      myApp.controller('ctrl2', two) })(); 
</div
        
     
     

Список ответов

2
 
vote

ОК, проблема была две вещи

Вам нужно использовать ST-Safe-SRC

 <код> <table st-safe-src="rowCollection" st-table="displayCollection" class="table table-striped">   

и ваш ряд ng-repex должен быть на <код> stdout0

 <код> stdout1  

Вам не нужно инициатировать <код> stdout2

 

Ok the issue was two things

You need to use st-safe-src

<table st-safe-src="rowCollection" st-table="displayCollection" class="table table-striped"> 

And your row ng-repeat needs to be on the displayCollection

 <tr ng-repeat="row in displayCollection"> 

You don't need to initialise displayCollection

</div
 
 
       
       

Связанный проблема

1  JavaScript не работает над динамическим контентом  ( Javascript not working on dynamic content ) 
У меня есть страница, где в HTML Div загружен с другой страницы. На родительской странице у меня есть JavaScript, который имеет элементы, которые применяются ...

0  Отображать имя страницы в JavaScript?  ( Display page name in javascript ) 
Как бы я добавил <код> location.href.split('/').pop() к документу HTML для отображения имени страницы? (Не весь URL) я хотел бы отобразить только имя страниц...

0  JavaScript Ball Collision  ( Javascript ball collision ) 
Я пытаюсь создать простую игру JavaScript с простыми физиками. Я могу определить, когда 2 шарика столкнулись, но у меня возникли проблемы с обработкой столкно...

0  Кнопка CKeditor 4 Не отображается  ( Ckeditor 4 underline button not showing ) 
Это мой код JavaScript для конфигурации моего CKEDITOR. Я нахожу на браузере для этого решения, но я не могу найти никакого решения даже на официальном сайте ...

0  OnClick = "Commentcheck ({{Meeting.people}})", ожидаемый идентификатор, строка или номер  ( Onclick authoritycheckmeeting people expected identifier string or num ) 
У меня возникли проблемы с отправкой <код> {{meeting.people}} Value на функцию JS. Код подписан на Сообщение об ошибке говорит: ожидаемый идентификатор, ст...

30  Как я могу использовать Nodejs с Windows 7? [закрыто]  ( How can i use nodejs with windows 7 ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> <Путь d = "M15 6.38A6.48 6.48 0 007.78. 04H-.02A6.49 6.49 0 002.05 ...

59  Дисплей Div в положении курсора в Textarea [дубликат]  ( Display div at cursor position in textarea ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

0  Почему Autoseizecolumn () Loop, похоже, замораживает сценарий Google Apps?  ( Why does an autoresizecolumn loop seem to freeze a google apps script ) 
Все, что я пытаюсь сделать, это изменить размер всеми колонны в электронной таблице. Это автономная электронная таблица. Я использую: <код> function format(...

0  Google Map не отображает  ( Google map not displaying ) 
У меня есть карта Google, которая используется здесь: http://www.comehike.com/outdoors/birds/birds.php Теперь я вижу сообщения об ошибках .j для 1) Инициа...

0  .append () элемент с более чем одним классом  ( Append element with more than one class ) 
Я не могу найти информацию о том, можно ли использовать .append (), чтобы добавить элемент в HTML и дать этому элементу более одного класса <код> $( ".nav"...

1  JavaScript: Получение идентификатора родителя из документа  ( Javascript getting the id of the parent from a document ) 
У меня возникли проблемы с тем, чтобы получить идентификатор родителя документа, который здесь «iFrame1». Как вы можете видеть, что JavaScript должен проживат...

0  Новое развитие приложений с использованием Cordova и Ionic  ( Native app development using cordova and ionic ) 
Как сохранить процесс или сервис всегда запущены даже после того, как приложение будет убито пользователем, похожее на секундомер, который будет запущен даже ...

0  Обновление происхождения перетаскивания / прокрутки после обновления данных с переходом в D3  ( Update drag scroll origin after an update of the data with transition in d3 ) 
Я работаю на диаграмме с перетаскиванием, масштабированием и обновлениями. Это в основном работает, однако, после добавления новых данных позиция перетаскиван...

4  Является ли хорошей идеей использовать условные зависимости в модулях AMD?  ( Is it a good idea to use conditional dependencies in amd modules ) 
Я думаю об использовании условий для указания модуля зависит в модульной системе AMD. Например, чтобы загрузить библиотеку на браузере и библиотеку на сервере...

1  Форма подписки Rapidmail перенаправляет после подписки электронной почты - MailChimp  ( Rapidmail subscription form redirect after email subscription mailchimp ) 
Я создаю веб-страницу, которая включает в себя очень простую форму подписки, в основном собирая адреса электронной почты, заинтересованные в продукте. Для это...

Связанный проблема

1  JavaScript не работает над динамическим контентом 
0  Отображать имя страницы в JavaScript? 
0  JavaScript Ball Collision 
0  Кнопка CKeditor 4 Не отображается 
0  OnClick = "Commentcheck ({{Meeting.people}})", ожидаемый идентификатор, строка или номер 
30  Как я могу использовать Nodejs с Windows 7? [закрыто] 
59  Дисплей Div в положении курсора в Textarea [дубликат] 
0  Почему Autoseizecolumn () Loop, похоже, замораживает сценарий Google Apps? 
0  Google Map не отображает 
0  .append () элемент с более чем одним классом 
1  JavaScript: Получение идентификатора родителя из документа 
0  Новое развитие приложений с использованием Cordova и Ionic 
0  Обновление происхождения перетаскивания / прокрутки после обновления данных с переходом в D3 
4  Является ли хорошей идеей использовать условные зависимости в модулях AMD? 
1  Форма подписки Rapidmail перенаправляет после подписки электронной почты - MailChimp