options with class=&quot;mdb -select&quot; are not d

Topic: options with class="mdb -select" are not displayed

gabrielsule free asked 7 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>

Add comment

umair free answered 7 years ago

1 0 Best answer

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

Add comment

Bartłomiej Malanowski staff answered 7 years ago

0 0 Best answer

Oh, I'm sorry. Already fixed:

<pre><code><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>

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

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

<script type="text/javascript" src="js/tether.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/mdb.min.js"></script>

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></code></pre>

Please insert min. 20 characters.

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>

Add comment

gabrielsule free answered 7 years ago

0 0 Best answer

I check the code with Chrome inspect, and the result is as follows

<pre><code><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></code></pre>

<pre><code><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></code></pre>

Please insert min. 20 characters.

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>

Add comment

Bartłomiej Malanowski staff answered 7 years ago

0 0 Best answer

Try my code:

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

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

<script type="text/javascript" src="js/tether.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/mdb.min.js"></script>

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></code></pre>

Please insert min. 20 characters.

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>

Add comment

gabrielsule free answered 7 years ago

0 0 Best answer

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>

Add comment

Bartłomiej Malanowski staff answered 7 years ago

0 0 Best answer

Did you initialize Material Select?

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

gabrielsule

12Support score
2Questions 3Answers 0Snippets