Filtrer un élément dans un tableau.

Version imprimable

Salut a tous !

Je suis débutant sur Angular, et je souhaiterai me former un peu a cette techno.

voici mon code ;

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<section>
    <page-title-directive title-str="{{ 'SCREEN.EXTRA-CATEGORY-LIST.TITLE' | translate }}"></page-title-directive>
    <page-menu-directive can-create="true" create-ui-sref="extracategory({id: 'new'})" can-remove="false" ></page-menu-directive>
</section>
 
<section>
    <page-search-directive search-placeholder="{{ 'SCREEN.EXTRA-CATEGORY-LIST.SEARCH' | translate }}" search-model="query.search" search-query="query" search-fct="getExtraCategories"></page-search-directive>
</section>
 
<md-table-container>
    <table md-table>
        <thead md-head>
        <tr md-row>
            <th md-column>{{ 'DATAS.LABELS.EXTRA-CATEGORY.ID' | translate }}</th>
            <th md-column>{{ 'DATAS.LABELS.EXTRA-CATEGORY.NAME' | translate }}</th>
          <th md-column>{{ 'DATAS.LABELS.EXTRA-CATEGORY.NAME' | translate }}</th>
            <th md-column>{{ 'MENU.ACTIONS' | translate }}</th>
        </tr>
        </thead>
        <tbody md-body>
        <tr md-row ng-repeat="extraCategory in extraCategories">
            <td md-cell>{{extraCategory.id}}</td>
            <td md-cell>{{extraCategory.name}}</td>
            <td ng-if="extraCategory.isDefault == true" md-colors="{color:'RED'}" md-cell>{{extraCategory.isDefault}}</td>
            <td md-cell>
                <md-button class="md-icon-button" ui-sref="extracategory({id: {{extraCategory.id}}})" title="{{ 'ACTION.SHOW.EXTRA-CATEGORY' | translate }}" aria-label="{{ 'ACTION.SHOW.EXTRA-CATEGORY' | translate }}">
                    <md-icon class="material-icons"> exit_to_app </md-icon>
                </md-button>
            </td>
        </tr>
        </tbody>
    </table>
</md-table-container>
 
<md-table-pagination md-limit="query.maxPerPage" md-page="query.page" md-total="{{query.total}}" md-on-paginate="onPaginate" md-page-select></md-table-pagination>

Voici plus précisément la ligne qui je pense est essentielle :

Code:

<td ng-if="extraCategory.isDefault == true" md-colors="{color:'RED'}" md-cell>{{extraCategory.isDefault}}</td>

Ce que je souhaiterai c'est si "extraCategory.isDefault == true" alors mon élément remonte en tete du tableau.

Pourriez vous me donner un coup de main ?
D'avance merci

10/05/2017, 10h51
dukoid

tu as donc une liste d’éléments que la vue affiche les uns après les autres.
la vue ne peut pas remonter le flux comme ça par magie (en fait, il existe bien une solution mais c'est de la grosse bidouille)

ce qu'il faut : faire un traitement sur ta liste en amont cad avant l'affichage dans le composant afin de mettre cet élément en tête de liste

Salut et merci infiniment pour ta réponse :)

Voici ce que j'ai sur mon component, c'est ici qu'a lieu le traitement ? Pourrait tu me donner une petite piste pour démarrer s'il te plait ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
(function() {
    'use strict';
 
    angular
        .module('boProcess')
        .component('extraCategoryListComponent', {
            templateUrl: 'app/components/extra-category-list/extra-category-list.template.html',
            controller: ExtraCategoryListController,
            controllerAs: 'extraCategoryListCtrl'
        });
 
    /** @ngInject */
    function ExtraCategoryListController($log, $scope, extraCategoryService, commonService) {
 
        $scope.query = {
            total: 0,
            page: 1,
            maxPerPage: 10,
            search: '',
            bookmark: 1
        };
 
        /**
         * @param page current selected page
         * @param limit number of items per page
         */
        $scope.onPaginate = function (page, limit) {
            $scope.query.page = page;
            $scope.query.maxPerPage = limit;
            $scope.getExtraCategories();
        };
 
        /**
         * List Extra Categories
         * @param page page number
         * @param limit number of items requested
         * @search search term
         */
        $scope.getExtraCategories = function () {
            // call API
          extraCategoryService.query({page: $scope.query.page, maxPerPage: $scope.query.maxPerPage, search: $scope.query.search}).$promise
                .then(function(response) {
                    // update pagination
                    $scope.query.total = response.info.totalResult;
                    $scope.query.page = response.info.pagination.currentPage;
                    $scope.query.maxPerPage = response.info.pagination.maxPerPage;
                    // update data
                    $scope.extraCategories = response.data;
                })
                .catch(function(response) {
                    $log.debug("Error append with status code " + response.status + ".");
 
                    $scope.query.total = 0;
                    $scope.query.page = 1;
                    $scope.query.maxPerPage = 0;
                    $scope.query.search = '';
 
                    commonService.showToast('SCREEN.EXTRA-CATEGORY-LIST.TOAST.QUERY-ERROR');
                })
            ;
        };
 
    }
 
})();

10/05/2017, 11h40
dukoid
Code:

1 2 $scope.extraCategories = response.data;
c'est bien là que extraCategories est rempli avec les elements.

donc c'est suite à ça, que tu vas faire ton traitement sur $scope.extraCategories pour réorganiser les éléments comme tu veux.

pour voir le contenu dans la console :
Code:

1 2 console.log( JSON.stringify( $scope.extraCategories ) );