Sélectionner Tout dans select multiple

1 pièce(s) jointe(s)

Bonjour,

Je travaille sur une application angularJs avec materialize comme framework css

J'ai sur une de mes views un select-multiple et je souhaiterais rajouter une option permettant de sélectionner toutes les options suivantes et désélectionner tout si re-clic.

View:
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 <select class="col s2 mySelectServices" id="mySelectServices" name="mySelectServices" multiple="multiple"
                    ng-model="filter_selection_services"
                    ng-options="filter as (filter.name ) for filter in filterService" ng-change="changedFilter()">
                <option value="" disabled selected>Filtre par Services</option>
            </select>
.....
<script type="text/javascript">
    $(document).ready(function () {
        $('select').material_select();
    });
    $(function () {
        var check_all = $('#toggle_all_services');
        check_all.on('click', function () {
            var div = $(this).parents('.row').find('.mySelectServices');
            var ul = div.find('ul');
            var li = ul.find('li:not(".disabled")');
            $(li).each(function () {
                if (!$(this).hasClass("active")) {
                    $(this).trigger('click');
                    $(this).addClass("active");
                    $(this).addClass("selected");
                }
 
                $(this).removeClass("active");
                $(this).removeClass("selected");
 
            });
        });
        $('select').material_select();
    });
    $(function () {
        var check_all = $('#toggle_all_status');
        check_all.on('click', function () {
            var div = $(this).parents('.row').find('.mySelectStatus');
            var ul = div.find('ul');
            var li = ul.find('li:not(".disabled")');
            $(li).each(function () {
                if (!$(this).hasClass("active")) {
                    $(this).trigger('click');
                    $(this).addClass("active");
                    $(this).addClass("selected");
                }
 
                $(this).removeClass("active");
                $(this).removeClass("selected");
 
            });
        });
        $('select').material_select();
    });
</script>

Controller :

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
 
    'use strict';
 
var myApp = angular.module('myApp.viewAgent', ['ngRoute', 'ngCookies']);
 
myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/viewAgent', {
        templateUrl: 'viewAgent/viewAgent.html',
        controller: 'viewAgentCtrl'
    });
}]);
 
 
myApp.controller('viewAgentCtrl', ['$scope', '$sce', '$cookies', function ($scope, $sce, $cookies) {
    let firstPartUrlDashboard = "http://localhost:5601/app/kibana#/dashboard/New-Dashboard?embed=true&_g=(refreshInterval:('$$hashKey':'object:549',display:'5+seconds',pause:!f,section:1,value:5000),time:(from:now-5y,mode:quick,to:now))&_a=(filters:!(),options:(darkTheme:!f),panels:!((col:1,id:New-Visualization,panelIndex:1,row:1,size_x:12,size_y:30,type:visualization)),query:(query_string:(analyze_wildcard:!t,query:'";
    let lastPartUrlDashboard = " ')),title:'New+Dashboard',uiState:(P-1:(vis:(params:(sort:(columnIndex:!n,direction:!n))))))";
 
    $scope.filterService = [{
        "id": 2,
        "name": "SERVICE 1",
        "value": "Drama"
    }, {"id": 3, "name": "SERVICE 2", "value": "Comedy"}, {"id": 4, "name": "SERVICE 3", "value": "Mystery"}];
    $scope.filterStatus = [{
        "id": 2,
        "name": "Non Prêt",
        "value": "1295"
    }, {"id": 3, "name": "Actif", "value": "\"James Franco\""}, {
        "id": 4,
        "name": "Libre",
        "value": "\"Veronica Mars\""
    }, {
        "id": 5,
        "name": "Déconnecté",
        "value": "Lovelace"
    }];
    let init_filter_selection = "*";
    $scope.filter_selection_services = $scope.filterService[0];
    $scope.filter_selection_status = $scope.filterStatus[0];

Actuellement j'ai une case a cocher sous mon select multiple (exemple sur la gauche avec les status) qui coche ou décoche toutes les lignes comme par exemple service 1 /service 2 /service 3 .
Je souhaiterais faire en sorte que cette case tout les services par exemple soit positionnée entre la ligne filtre par service et service 1 (cote droit de l'image ) .

Pièce jointe 268810

Merci A tous

Salut, faut éviter le jquery avec angularJs, et pas mettre de code JS dans les vues. vaut mieux utiliser les libs adaptées au framework CSS , exemple :

https://krescruz.github.io/angular-materialize/

Ou alors pour bootstrap

https://angular-ui.github.io/bootstrap/

PS : ca m'arrive de mettre du jquery dans les controleurs, mais c'est grave rare !

Super merci pour le angular-materialize !!

je vais modifier mon projet avec et merci pour les conseils .

et pour le sélectionner tout aurais tu une idée ?

A froid comme ça non.Peut être une piste ici :

https://github.com/Dogfalo/materialize/issues/3255

Pour le plug c'est là :

https://krescruz.github.io/angular-materialize/#select