Question

我正在研究使用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控制器中发送请求。

可以＆＃34;转换＆＃34;不知何故，这个代码形成了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);

        }
    }
});

Answer 2

是的，这是可能的。当你理解AngularJS时，它甚至非常简单。

首先看一下angularjs文档如何将控制器绑定到模板，然后在这里查看，它们描述了如何创建选择列表https://docs.angularjs.org/api/ng/directive/select

你的任务并不复杂，你可以在30分钟内完成它，而你正在阅读文档，即使你不熟悉角色。完成后，您可以发布代码并将其标记为已接受;）

Answer 3

好的，我找到了angularjs的解决方案，而且非常简单。这是代码：

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

将jQuery代码转换为angularjs

3 个答案: