javascript - 将 jQuery 代码转换为 angularjs

Question

我正在开发一个使用 AngularJS 的 ionic 框架的项目，是否可以将以下代码从 jQuery 转换为 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);
    });

});

我使用 3 个选择标签，最后一个标签带有城市 ID，在 ByCityTag Controller 中发送请求。

是否可以以某种方式将此代码从 jQuery“转换”为 AngularJS？

Jsfidle

Answer 1

我制定了以下指令将 jquery Combodate 转换为 Angular。也许这会有所帮助

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);

        }
    }
});