Last active
May 20, 2016 10:47
-
-
Save KeithNdhlovu/25984d59e52eb77fada56de130fd12f7 to your computer and use it in GitHub Desktop.
I Noticed that MaterializeCSS used the Select box, faster than my AngularJS script, by the time agular is finished the select box would have already been initialised
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"es_data": [ | |
| { | |
| "id" : "1", | |
| "state": "OH", | |
| "gender": "female" | |
| }, | |
| { | |
| "id" : "2", | |
| "state": "NY", | |
| "gender": "male" | |
| }, | |
| { | |
| "id" : "3", | |
| "state": "PK", | |
| "gender": "female" | |
| }, | |
| { | |
| "id" : "4", | |
| "state": "CH", | |
| "gender": "male" | |
| }, | |
| { | |
| "id" : "5", | |
| "state": "IN", | |
| "gender": "female" | |
| }, | |
| { | |
| "id" : "6", | |
| "state": "TB", | |
| "gender": "male" | |
| } | |
| ] } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="Main_Module"> | |
| <head> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"> | |
| <script data-require="AngularJS1.4@*" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script> | |
| <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> | |
| </head> | |
| <body ng-controller="MainCtrl"> | |
| <div class="input-field col s12"> | |
| <select> | |
| </select> | |
| <label>Materialize Select</label> | |
| </div> | |
| <script> | |
| var Main_Module = angular.module('Main_Module', []); | |
| Main_Module.controller('MainCtrl', function MainCtrl($scope, $http) { | |
| $scope.es_fetched_details = []; | |
| //$scope.field = 'World'; | |
| //ng-options="field in es_fetched_details" | |
| $http.get('data.json').success(function(data) { | |
| $scope.es_fetched_details = data.es_data; | |
| // clear contents | |
| var $selectDropdown = | |
| $("select") | |
| .empty().html(' '); | |
| angular.forEach($scope.es_fetched_details,function(field){ | |
| $selectDropdown.append( | |
| $("<option></option>") | |
| .attr("value",field.id) | |
| .text(field.state) | |
| ); | |
| }); | |
| // trigger event | |
| $selectDropdown.trigger('contentChanged'); | |
| }); | |
| }); | |
| </script> | |
| <script> | |
| $(document).ready(function(){ | |
| $('select').on('contentChanged', function() { | |
| // re-initialize (update) | |
| $(this).material_select(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment