Convert jQuery code to angularjs

Question

I am working on project with ionic framework which is use AngularJS, its possible to convert the following code form jQuery to AngularJs ?

jQuery(function($) {

    var states = {
        'USA': ['Arizona','California','Colorado','D.C','Florida','Georgia','Hawai','Indiana'],
        'Canada':['Canada'],
    }

    var cities = {
        'Arizona': [
            'Phoenix','Tucson'],

    }

    var $states = $('#state');
    $('#country').change(function() {
        var country = $(this).val();
        var states_op = states[country] || [];

        var html = $.map(states_op, function(sts) {
            return '<option valie ="' + sts + '">' + sts + '</option>'
        }).join('');
        $states.html(html);
    });


    var $cities = $('#city');
    $('#state').change(function() {
        var state = $(this).val();
        var cities_op = cities[state] || [];

        var html = $.map(cities_op, function(sts) {
            return '<option valie ="' + sts + '">' + sts + '</option>'
        }).join('');
        $cities.html(html);
    });

});

i use 3 select tags which the last on with city id send request in ByCityTag controller.

Is posible to "convert" somehow this code form jQuery to AngularJS?

Jsfidle

Short answer is yes it is possible! You would do something like use ng-change and bind to some models :). — ajmajmajma
– ajmajmajma, Commented Aug 20, 2015 at 18:38

Shashank Singh · Accepted Answer · 2015-08-20 18:37:34Z

I have made following directive to convert jquery Combodate to angular. may be this will help

var ngModule = angular.module('dashboardNewApp');
ngModule.directive('comboDate', function($timeout) {
    return {
        restrict : 'A',
        require:'ngModel',
        scope:{
            ngModel:'='
        },
        link : function(scope, element, attr) {
            function renderComboDate() {
                var comboElem=angular.element(element);
                comboElem.combodate({
                    value:scope.ngModel,
                    format:'DD-MM-YYYY',
                    template:'DD / MM / YYYY'
                });
                comboElem.on('change',function(){
                    scope.ngModel=comboElem.combodate('getValue');
                })
                scope.$watch(function () {
                     return scope.ngModel;
                  }, function(newValue) {
                      if(newValue)
                      {
                        comboElem.combodate('setValue',newValue);
                      }
                  });               
            }

            $timeout(function() {
                renderComboDate();
            }, 0);

        }
    }
});

pureofpure · Accepted Answer · 2015-08-21 11:53:43Z

Ok i found the solution with angularjs, and its very simple. Here is the code:

.controller('SelectStatesCtrl', function($scope) {
      $scope.countries = {
        'Canada': {
          'Canada': ['Montreal','Toronto','Vancouver']
        }

      };


    })

and the html part:

 <select id="country" ng-options="country for (country, states) in countries"  ng-model="statessource" ng-init=" statessource = countries.USA">
                    </select>
<select id="state" ng-disabled="!statessource" ng-model="citiessource" ng-options="state for (state,city) in statessource" ng-change="GetSelectedState()">
                        <option></option>
                    </select>
<select id="city" ng-disabled="!citiessource || !statessource" ng-model="city" ng-change="getByCity(city)">
                        <option ng-repeat="city in citiessource" value='{{city}}'>{{city}}</option>
                    </select>

webdeb · Accepted Answer · 2015-08-20 18:52:42Z

Yeah, it's possible. it's even really simple, when you understand AngularJS.

First look at the angularjs documentation how to bind an controller to the template, and then look here, they describe how to create a select list https://docs.angularjs.org/api/ng/directive/select

Your task is not complicated, you can do it in 30min, while you are reading the docs even if you are new to angular. When you are done, you can post your code and mark it as accepted ;)

Collectives™ on Stack Overflow

Convert jQuery code to angularjs

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related