Discussion :

[moonshine34]

Salut a tous !

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

voici mon code ;

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

[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

[moonshine34]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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');
                })
            ;
        };
 
    }
 
})();

[dukoid]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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