The multiple-choice selection tool is not displaying any choices

Question

The multiple-choice selection tool is not displaying any choices

I am having an issue with my ng-repeat code in conjunction with the jquery multiple-select plugin. Despite using this plugin for a multiple select functionality, the options generated by ng-repeat are not visible.

Below is the code snippet in question:

<select multiple="multiple" class="browser-default" name="userprofile" id="userprofile"
       ng-model="user.profile">
    <option ng-repeat="profile in userprofiles" value="{{profile.profile}}">
             {{ profile.profile_name }}
    </option>

<script type="text/javascript">
   $(document).ready(function(){
        $('#userprofile').multipleSelect();
    });
</script>

javascript jquery html css angularjs

Answer 1

Answer №1

These are the JavaScript files I utilized for implementing a multiselect feature.

'use strict';

var app = angular.module('myApp', ['app.directives']);

app.controller('AppCtrl', function($scope){                     
    $scope.roles = [
          {"id": 1, "name": "Manager", "assignable": true},
          {"id": 2, "name": "Developer", "assignable": true},
          {"id": 3, "name": "Reporter", "assignable": true}
    ];
    
    $scope.member = {roles: []};
    $scope.selected_items = [];
});

var app_directives = angular.module('app.directives', []);

app_directives.directive('dropdownMultiselect', function(){
   return {
       restrict: 'E',
       scope:{           
            model: '=',
            options: '=',
            pre_selected: '=preSelected'
       },
       template: "<div class='btn-group' data-ng-class='{open: open}'>"+
        "<button class='btn btn-small'>Select</button>"+
                "<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><span class='caret'></span></button>"+
                "<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" + 
                    "<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i>  Check All</a></li>" +
                    "<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i>  Uncheck All</a></li>" +                    
                    "<li class='divider'></li>" +
                    "<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>" +                                        
                "</ul>" +
            "</div>" ,
       controller: function($scope){
           
           $scope.openDropdown = function(){        
                    $scope.selected_items = [];
                    for(var i=0; i<$scope.pre_selected.length; i++){                        $scope.selected_items.push($scope.pre_selected[i].id);
                    }                                        
            };
           
            $scope.selectAll = function () {
                $scope.model = _.pluck($scope.options, 'id');
                console.log($scope.model);
            };            
            $scope.deselectAll = function() {
                $scope.model=[];
                console.log($scope.model);
            };
            $scope.setSelectedItem = function(){
                var id = this.option.id;
                if (_.contains($scope.model, id)) {
                    $scope.model = _.without($scope.model, id);
                } else {
                    $scope.model.push(id);
                }
                console.log($scope.model);
                return false;
            };
            $scope.isChecked = function (id) {                 
                if (_.contains($scope.model, id)) {
                    return 'icon-ok pull-right';
                }
                return false;
            };                                 
       }
   } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>


<div ng-app="myApp" ng-controller="AppCtrl">    
    <dropdown-multiselect pre-selected="member.roles" model="selected_items" options="roles"></dropdown-multiselect>
    <pre>selected roles = {{selected_items | json}}</pre>
</div>

Answer 2

These are the JavaScript files I utilized for implementing a multiselect feature.

'use strict';

var app = angular.module('myApp', ['app.directives']);

app.controller('AppCtrl', function($scope){                     
    $scope.roles = [
          {"id": 1, "name": "Manager", "assignable": true},
          {"id": 2, "name": "Developer", "assignable": true},
          {"id": 3, "name": "Reporter", "assignable": true}
    ];
    
    $scope.member = {roles: []};
    $scope.selected_items = [];
});

var app_directives = angular.module('app.directives', []);

app_directives.directive('dropdownMultiselect', function(){
   return {
       restrict: 'E',
       scope:{           
            model: '=',
            options: '=',
            pre_selected: '=preSelected'
       },
       template: "<div class='btn-group' data-ng-class='{open: open}'>"+
        "<button class='btn btn-small'>Select</button>"+
                "<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><span class='caret'></span></button>"+
                "<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" + 
                    "<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i>  Check All</a></li>" +
                    "<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i>  Uncheck All</a></li>" +                    
                    "<li class='divider'></li>" +
                    "<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>" +                                        
                "</ul>" +
            "</div>" ,
       controller: function($scope){
           
           $scope.openDropdown = function(){        
                    $scope.selected_items = [];
                    for(var i=0; i<$scope.pre_selected.length; i++){                        $scope.selected_items.push($scope.pre_selected[i].id);
                    }                                        
            };
           
            $scope.selectAll = function () {
                $scope.model = _.pluck($scope.options, 'id');
                console.log($scope.model);
            };            
            $scope.deselectAll = function() {
                $scope.model=[];
                console.log($scope.model);
            };
            $scope.setSelectedItem = function(){
                var id = this.option.id;
                if (_.contains($scope.model, id)) {
                    $scope.model = _.without($scope.model, id);
                } else {
                    $scope.model.push(id);
                }
                console.log($scope.model);
                return false;
            };
            $scope.isChecked = function (id) {                 
                if (_.contains($scope.model, id)) {
                    return 'icon-ok pull-right';
                }
                return false;
            };                                 
       }
   } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>


<div ng-app="myApp" ng-controller="AppCtrl">    
    <dropdown-multiselect pre-selected="member.roles" model="selected_items" options="roles"></dropdown-multiselect>
    <pre>selected roles = {{selected_items | json}}</pre>
</div>

The multiple-choice selection tool is not displaying any choices

Answer №1

Similar questions

Encountering issues with jQuery AJAX POST request

Develop a series of sequential tests for the playwright to execute

"Repeating SignalR Messages: Issue of Duplication when Stopping and Restarting

`Animate your divs with slide in and slide out effects using

Paused momentarily to allow user input

Exploring the challenges of setting up Node in an attempt to unravel AngularJs 1.5

"Uncovering the versatility of jQuery when selecting options with multiple values

Tips for passing a function and an object to a functional component in React

ngGrid: cellTemplate unable to capture user inputs

The custom component at the beginning of the MDX file in a Next.js project is not adhering to the

javascriptHow to specify the character set in a Data URI

Have you ever wondered why req.body returns as undefined when using body parser?

Discover the name of a color using its HEX code or RGB values

Having trouble initiating a "curl:localhost:3000" connection, receiving a URI Error message

Utilize jQuery to dynamically apply Bootstrap classes while scrolling through a webpage

Limit access to a page only to designated users

Is it possible to modify the concealed global attribute using CSS?

Tips for automatically adjusting the height of the footer

Error: It seems like there was a problem with the injector and the module could not be

How to maintain HTML list items in a single line while overlaying text