Select Multiple angular materialize

Bonjour a tous ,

Je développe une application basée sur AngularsJs et materialize css (+kibana et elk) , j'ai mis en place un select multiple avec la premiere ligne en disabled selected qui fonctionne à peu près correctement .

code html :

Code:

1
2
3
4
5
6
7
8
9
10
11
<form id="selectForm" ng-controller="viewAgentCtrl">
 
    <select class="col s2" 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>
    <select class="col s2" name="mySelectStatus" multiple="multiple" ng-model="filter_selection_status"
            ng-options="filter as (filter.name ) for filter in filterStatus" ng-change="changedFilter()">
        <option value="" disabled selected>Filtre par status</option>
    </select>
    </form>

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
'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];
 
 
    var srcDashboard = firstPartUrlDashboard.concat(init_filter_selection).concat(lastPartUrlDashboard);
    $scope.url = $sce.trustAsResourceUrl(srcDashboard);

Je souhaiterais ajouter dans le select une ligne (option) permettant de sélectionner tout et de désélectionner tout en Js ou via angularsJs

Merci d'avance a tous