Discussion :

[fab56]

Bonjour,

Je suis sous Angular 1.x. J'essai d'écrire une directive pour créer une liste avec boutons radios avec un champ de recherche.

Pour les boutons radios, j'utilise la bibliothèque Angular Material dans sa version 1.1.3

Voici le code de ma directive :

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
app.directive('filterRadioList', function() {
    var controller = function ($scope) {
        $scope.filterText = '';
        $scope.selection = null;
 
        $scope.getItems = function () {
            return $scope.items.filter((item) => item.indexOf($scope.filterText) > -1);
        };
 
        $scope.select = function (item) {
            $scope.selection = item;
        }
    };
 
    return {
        restrict: 'E',
        scope: {
            items: '=',
            title: '@',
            placeholder: '@',
            onChange: '&'
        },
        controller: controller,
        templateUrl: 'app/partials/filter-radio-list.html' 
    }
});

Et voici le template HTML associé :

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
<md-card md-theme-watch>
    <md-card-title>
        <md-card-title-text>
            <span class="md-headline"><small>{{ title }}</small></span>
            <span class="md-subhead">
                <md-input-container>
                    <label>{{ placeholder }}</label>
                    <input ng-model="filterText">
                </md-input-container>  
                <i ng-click="filterText = ''" class="material-icons">cancel</i>
            </span>
        </md-card-title-text>
 
    </md-card-title>
 
    <md-content-card style="height: 200px; padding-left: 50px; overflow-y: auto">
 
        <md-radio-group ng-change="select(item)" ng-model="selection" ng-repeat="item in getItems()">
            <md-radio-button ng-value="item" class="md-primary">{{ item }}</md-radio-button>
        </md-radio-group>
 
    </md-content-card>
</md-card>

Lorsque j'utilise ce code en dehors d'une directive, c'est-à-dire directement dans un contrôleur, tout fonctionne.

Mais quand j'utilise ma directive avec cette balise :

Code :

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

<filter-radio-list items="['a', 'b', 'c']" title="Lettres" placeholder="lettre?"></filter-radio-list>

Le code correspondant s'affiche bien mais les cases restent cochées lorsque l'on clique sur une autre radio.

La variable du scope selection est bien mise à jour mais la mise à jour de l'affichage n'est pas répercutée. Lorsque j'effectue une filtrage avec le champ de recherche et que je l'efface. Les cases sont correctement décochée.

J'ai essayé un $scope.$apply(); après la mise à jour de la sélection dans la fonction select() du contrôleur mais j'ai l'erreur : $digest already in progress when calling $scope.$apply()

Avez-vous une solution ?

Merci d'avance,

[fab56]

Bonjour,

J'ai finalement trouvé la solution à mon problème. Cela venait d'une incompréhension de ma part :

Code html :

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

1
2
3
<md-radio-group ng-change="select(item)" ng-model="selection" ng-repeat="item in getItems()">
            <md-radio-button ng-value="item" class="md-primary">{{ item }}</md-radio-button>
        </md-radio-group>

Je posais la directive ng-repeat sur le radio-group et non sur le radio-button donc Angular créait un groupe de bouton pour chaque élément voilà pourquoi je pouvais tous les cocher.

Voici le bon code :

Code html :

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

1
2
3
<md-radio-group ng-model="ngModel">
            <md-radio-button ng-repeat="item in items" ng-if="filtered(item)" ng-value="item" class="md-primary">{{ item[attribute] }}</md-radio-button>
        </md-radio-group>

Encore désolé, en espérant que cela serve à quelqu'un.