Конвертировать код jQuery в angularjs

Question

Конвертировать код jQuery в angularjs

0

Я работаю над проектом с ионной каркасом, который использует 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 тега выбора, которые последний отправляет с запросом отправки идентификатора города в контроллере ByCityTag.

Возможно ли "преобразовать" каким-то образом эту форму кода jQuery в AngularJS?

Jsfidle

pureofpure 20 авг. 2015, в 21:04

Источник

0

Короткий ответ: да, это возможно! Вы бы сделали что-то вроде использования ng-change и привязки к некоторым моделям :).
ajmajmajma 20 авг. 2015, в 18:38

Теги:

javascript

jquery

angularjs

3 ответа

1

Я сделал следующую директиву для преобразования 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);

        }
    }
});

Shashank Singh 20 авг. 2015, в 16:29

0

Да, это возможно. это даже очень просто, когда вы понимаете AngularJS.

Сначала посмотрите на документацию angularjs, как связать контроллер с шаблоном, а затем посмотрите здесь, они описывают, как создать список выбора https://docs.angularjs.org/api/ng/directive/select

Ваша задача не сложна, вы можете сделать это за 30 минут, пока вы читаете документы, даже если вы новичок в угловом. Когда вы закончите, вы можете опубликовать свой код и пометить его как принятый;)

webdeb 20 авг. 2015, в 16:08

Ещё вопросы

Короткий ответ: да, это возможно! Вы бы сделали что-то вроде использования ng-change и привязки к некоторым моделям :).

pureofpure · Accepted Answer · 2015-08-21T10-40-00.000Z

Хорошо, я нашел решение с угловыми, и это очень просто. Вот код:

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

      };


    })

и html часть:

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