我正在使用使用AngularJS的离子框架进行项目,
是否有可能将以下代码形式的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控制器中发送请求。

可以以某种方式将jQuery的代码“转换”为AngularJS吗?

Jsfidle

最佳答案

我做了以下指令将jQuery Combodate转换为角度。
也许这会有所帮助

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

        }
    }
});

07-24 18:12
查看更多