options with class=mdb -select are not displayed

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: options with class="mdb -select" are not displayed

gabrielsule asked 8 years ago

I'm dynamically filled the select element through a $scope Angular 1.5, if I use the "browser -default" class data are seen, but if I use "mdb -select" are not seen but are loaded 
$scope.options = {
                  1: "Partner",
                  2: "Owner",
                  3: "Client"
                  };
 $scope.selected = company.data.id_companytype.toString();
 <select ng-model="selected" ng-options="key as val for (key,val) in options" class="browser-default"></select>
    <br>
    <select ng-model="selected" ng-options="key as val for (key,val) in options" class="mdb-select"></select>

umair answered 8 years ago

yes it is working after $(‘.mdb-select’).material_select(‘destroy’); $(‘.mdb-select’).material_select(”); thanks @dineshbhavsar.

Bartłomiej Malanowski staff pro premium answered 8 years ago

Did you initialize Material Select? 
<script>
	$(document).ready(function() {
		$('.mdb-select').material_select();
	});
</script>

gabrielsule answered 8 years ago

Yes, I added in a view (ng-view) , because from the index does not work. use a select with fixed data and it works perfectly , the problem is when it is loaded dynamically 
<script>
    $(document).ready(function () {
        $('.datepicker').pickadate();
        $('.mdb-select').material_select();    
    });
</script>

Bartłomiej Malanowski staff pro premium answered 8 years ago

Try my code: 
<body ng-app="app" ng-controller="MainController">
	<select ng-model="selected" ng-options="key as val for (key,val) in options" ng-selected="key == 0" class="mdb-select"></select>

	<!-- SCRIPTS -->

	<!-- Angular 1.5.8 -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

	<!-- JQuery -->
	<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

	<!-- Bootstrap tooltips -->
	<script type="text/javascript" src="js/tether.min.js"></script>

	<!-- Bootstrap core JavaScript -->
	<script type="text/javascript" src="js/bootstrap.min.js"></script>

	<!-- MDB core JavaScript -->
	<script type="text/javascript" src="js/mdb.min.js"></script>

	<script type="text/javascript">
		(function() {

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

			app.controller('MainController', function($scope) {
				$scope.options = {
					1: "Partner",
					2: "Owner",
					3: "Client"
				};
			});

		})();

		$(document).ready(function () {
			$('.mdb-select').material_select();    
		});
</script>
</body>

gabrielsule answered 8 years ago

I check the code with Chrome inspect, and the result is as follows 
<select ng-model="selected" ng-options="key as val for (key,val) in options" class="browser-default ng-pristine ng-untouched ng-valid ng-not-empty">
<option label="Partner" value="string:1">Partner</option>
<option label="Owner" value="string:2" selected="selected">Owner</option>
<option label="Client" value="string:3">Client</option>
</select>
<div class="select-wrapper mdb-select ng-pristine ng-untouched ng-valid ng-empty">
<span class="caret">▼</span>
<input type="text" class="select-dropdown" readonly="true" data-activates="select-options-a733b62b-f88e-d752-1ab3-4d78f4f06fe4" value="">
<ul id="select-options-a733b62b-f88e-d752-1ab3-4d78f4f06fe4" class="dropdown-content select-dropdown">
<li class=""><span></span></li>
</ul>
<select ng-model="selected" ng-options="key as val for (key,val) in options" class="mdb-select ng-pristine ng-untouched ng-valid initialized ng-not-empty">
<option label="Partner" value="string:1">Partner</option>
<option label="Owner" value="string:2" selected="selected">Owner</option>
<option label="Client" value="string:3">Client</option>
</select>
</div>

Bartłomiej Malanowski staff pro premium answered 8 years ago

Oh, I'm sorry. Already fixed: 
<body ng-app="app" ng-controller="MainController">
	<select ng-model="selected" ng-options="key as key.name for key in options track by key.value" class="mdb-select">
		<option value="" disabled selected>Choose your option</option>
	</select>

	<!-- SCRIPTS -->

	<!-- Angular 1.5.8 -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

	<!-- JQuery -->
	<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

	<!-- Bootstrap tooltips -->
	<script type="text/javascript" src="js/tether.min.js"></script>

	<!-- Bootstrap core JavaScript -->
	<script type="text/javascript" src="js/bootstrap.min.js"></script>

	<!-- MDB core JavaScript -->
	<script type="text/javascript" src="js/mdb.min.js"></script>

	<script type="text/javascript">
		(function() {

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

			app.controller('MainController', function($scope) {
				$scope.options = [
					{ value: "1", name: "Partner" },
					{ value: "2", name: "Owner" },
					{ value: "3", name: "Client" }
				];

			});

		})();

		$(document).ready(function () {
			$('.mdb-select').material_select();    
		});
</script>
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
mdb-select-angularjs
Related topics
1
$('.mdb-select').materialSelect(); is very slow when we have more than 6 select boxes. In my html page, we have many dynamically generated select boxes. What should i do.
0
mdb-select set value in table
0
mdb-select (Set the selected = true) no working
0
Simply want to set the colors on the MDB-Select Control
About author
gabrielsule
12Support score
2Questions 3Answers
0Snippets likes 0Snippets