Topic: ng binding doesn't work

juderaj free asked 7 years ago


mdb.js change original UI element (e.g. drop down) to ui/li elements drop down box, due to this if we try to bind angular model to such element the binding doesn't work, because the actual element it changes to some div elements. Code snippet :-
<select class="mdb-select" id="user-profile" data-ng-model="user.profile">
                                        <option value="" disabled selected>Choose your option</option>
                                        <option value="Self">Self</option>
                                        <option value="Son">Son</option>
                                        <option value="Daughter">Daughter</option>
                                        <option value="Brother">Brother</option>
                                        <option value="Sister">Sister</option>
                                        <option value="Friend">Friend</option>
                                        <option value="Relative">Relative</option>
                                    </select>
Ideally in controller like $scope.user.profile = $('#user-profile').val();

dineshbhavsar free answered 7 years ago


@umair try $('.mdb-select').material_select('destroy'); $('.mdb-select').material_select(''); after you are done populating $scope.items.

@umair, what's your version of MDB?

umair free answered 7 years ago


I am facing same issue. <select class="mdb-select" ng-model="user.items" ng-options="item as item.label for item in items track by item.id"> <option value="" disabled selected>Choose your option</option> </select> <label>Blue select</label> angular code data is ajax data. $scope.items = []; for (i = 0; i < data.length ; i++) { var items = { id: 1, label: 'aLabel' }; items.id = data[i].Company_Id; items.label = data[i].CompanyName; $scope.items.push(items); } options are coming html page but not coming in drop down list of spans elements!

dineshbhavsar free answered 7 years ago


Your solution is not working, although I'm able to make it work by adding additional script & workaround... Here is my code, also suggest the possible changes you can see and if you can get the generic solution for this issue it will be great.. <body ng-app="myApp" ng-controller="RegistrationController"> <!-- Bootstrap core CSS <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap <link href="css/mdb.full.css" rel="stylesheet"> --> <!-- SCRIPTS --> <!-- Angular --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <!-- Angular UI Router --> <script src="https://unpkg.com/angular-ui-router/release/angular-ui-router.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> <select master-data="masterData.profileCreatedFor" ng-model="user.profileCreatedFor" ng-options="key as key.name for key in masterData.profileCreatedFor track by key._id" ng-selected="x._id == user.profileCreatedFor._id" class="mdb-select"> <option value="" disabled selected>Choose your option</option> </select> <button ng-click="changeModel()">Change Model</button> </select> <br/> user.profileCreatedFor = {{user.profileCreatedFor}} <script> $(function() { $("select").change(function(){ var select = $(this); console.log('change - '+select); var modelName = $(this).attr('ng-model'); console.log('modelName - '+modelName); var masterDataAttr = $(this).attr('master-data'); var value = $(this).val(); var scope = angular.element($('[ng-app="myApp"]')).scope(); scope.$apply(function(){ masterData = scope.$eval(masterDataAttr); console.log('masterData = '+JSON.stringify(masterData)); angular.forEach(masterData, function (masterDataObject) { if(masterDataObject._id == value){ console.log('masterDataObject = '+JSON.stringify(masterDataObject)); scope.$eval('user.profileCreatedFor', masterDataObject);// = console.log('scope[modelName] = '+JSON.stringify(scope[modelName])); scope.$eval(modelName + "=" + JSON.stringify(masterDataObject)); } }); }); }); }); </script> <!-- App --> <script type="text/javascript"> var app = angular.module('myApp', []); app.controller('RegistrationController', function($scope) { $scope.user = {}; $scope.masterData = {} $scope.masterData.profileCreatedFor = [ { _id:1, value: "Self", name: "Self" }, { _id:2, value: "Son", name: "Son" }, { _id:3, value: "Daughter", name: "Daughter" }, { _id:4, value: "Brother", name: "Brother" }, { _id:5, value: "Sister", name: "Sister" }, { _id:6, value: "Friend", name: "Friend" }, { _id:7, value: "Relative", name: "Relative" } ]; $scope.user.profileCreatedFor = $scope.masterData.profileCreatedFor[3]; console.log('Init RegistrationController select - '+JSON.stringify($scope.user.profileCreatedFor)); $scope.changeModel = function(){ console.log('Inside changeModel'); $scope.user.profileCreatedFor = $scope.masterData.profileCreatedFor[4]; setTimeout(function() { updateMaterialSelect(); }, 0); } }); function updateMaterialSelect(){ $('.mdb-select').material_select('destroy'); $('.mdb-select').material_select(); } $(document).ready(function () { $('.mdb-select').material_select(); }); </script> </body>

Try this code:
<body ng-app="myApp" ng-controller="RegistrationController">

	<select ng-model="user.profileCreatedFor" ng-options="key as key.name for key in masterData.profileCreatedFor track by key.value" class="mdb-select">
		<option value="" disabled selected>Choose your option</option>
	</select>

	<button class="btn btn-primary" ng-click="register()">Submit</button>

	<!-- SCRIPTS -->

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

	<!-- Angular UI Router -->
	<script src="https://unpkg.com/angular-ui-router/release/angular-ui-router.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.js"></script>

	<!-- App -->
	<script type="text/javascript">
		var app = angular.module('myApp', []);

		app.controller('RegistrationController', function($scope) {
			$scope.masterData = {}
			$scope.masterData.profileCreatedFor = [
				{ value: "Self", name: "Self" },
				{ value: "Son", name: "Son" },
				{ value: "Daughter", name: "Daughter" },
				{ value: "Brother", name: "Brother" },
				{ value: "Sister", name: "Sister" },
				{ value: "Friend", name: "Friend" },
				{ value: "Relative", name: "Relative" }
			];

		});

		$(document).ready(function () {
			$('.mdb-select').material_select();	
		});

	</script>
</body>

dineshbhavsar free answered 7 years ago


No error.

Do you have any errors in console logs?

dineshbhavsar free answered 7 years ago


Javascript :- controllers.controller('registrationController', function($scope, $rest) { $scope.user = {}; $scope.masterData = {}; $scope.masterData.profileCreatedFor = [ { value: "Self", name: "Self" }, { value: "Son", name: "Son" }, { value: "Daughter", name: "Daughter" }, { value: "Brother", name: "Brother" }, { value: "Sister", name: "Sister" }, { value: "Friend", name: "Friend" }, { value: "Relative", name: "Relative" } ]; $scope.register = function() { alert("Check angular binding profileCreatedFor = " + $scope.user.profileCreatedFor); $scope.user.profileCreatedFor = $('#user-profile-for').val(); alert("Getiing it by id jquery way profileCreatedFor = " + $scope.user.profileCreatedFor); }); }; }); HTML :- <form id="kp-ragistration" data-ng-controller="registrationController"> <select class="mdb-select" id="user-profile-for" ng-options="key as key.name for key in masterData.profileCreatedFor track by key.value" data-ng-model="user.profileCreatedFor"> <option value="" disabled selected>Choose your option</option> </select> <button type="submit" class="btn btn-primary btn-lg" data-ng-click="register()">Register</button> </form> Observe the javascript code, Ideally II should get selected value in user.profileCreatedFor model but it's undefined. I followed your post - http://mdbootstrap.com/forums/topic/options-with-classmdb-select-are-not-displayed/ I'm facing same issue. binding not working for me :(

can you share your angular code?

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Specification of the issue

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