ng binding doesn't work

Topic: ng binding doesn't work

juderaj asked 8 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();

Add comment

dineshbhavsar answered 8 years ago

1 0 Best answer

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">    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>  <script src="https://unpkg.com/angular-ui-router/release/angular-ui-router.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> <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>  <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>

Add comment

dineshbhavsar answered 8 years ago

1 0 Best answer

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

Add comment

Bartłomiej Malanowski staff pro premium answered 8 years ago

0 0 Best answer

can you share your angular code?

Add comment

dineshbhavsar answered 8 years ago

0 0 Best answer

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 :(

Add comment

Bartłomiej Malanowski staff pro premium answered 8 years ago

0 0 Best answer

Do you have any errors in console logs?

Add comment

dineshbhavsar answered 8 years ago

0 0 Best answer

No error.

Add comment

Bartłomiej Malanowski staff pro premium answered 8 years ago

0 0 Best answer

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>

Add comment

umair answered 8 years ago

0 0 Best answer

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!

Add comment

Bartłomiej Malanowski staff pro premium answered 8 years ago

0 0 Best answer

@umair, what's your version of MDB?

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Specification of the issue

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

juderaj

0Support score
3Questions 0Answers

0Snippets likes 0Snippets