Question

我有这段代码：

<!DOCTYPE html>
<html>
<head>
<title>Lists Test</title>
<script src="https://code.angularjs.org/1.1.1/angular.min.js"></script>
<script>
    function Controller($scope) {

        $scope.backupCountries = {
            "id": "field10",
            "items": [{
                "id": "10",
                "StateGroupID": "0",
                "name": "United State"
    }, {
                "id": "2",
                "StateGroupID": "1",
                "name": "Canada"
    }]
        };

        $scope.backupStates = {
            "id": "field20",
            "StateGroups": [{
                    "items": [{
                        "id": "1",
                        "name": "Alabama"
        }, {
                        "id": "2",
                        "name": "Alaska"
        }, {
                        "id": "3",
                        "name": "Arizona"
        }, {
                        "id": "4",
                        "name": "California"
        }]
    },

                {
                    "items": [{
                        "id": "201",
                        "name": "Alberta"
        }, {
                        "id": "202",
                        "name": "British Columbia"
        }, {
                        "id": "303",
                        "name": "Manitoba"
        }, {
                        "id": "304",
                        "name": "Ontario"
        }]
    }]
        };

        $scope.Countries = $scope.backupCountries;
        $scope.getStates = function () {
            console.log($scope.selectedCountry);
            return         $scope.backupStates.StateGroups[$scope.selectedCountry].items;
        };
        //$scope.currentStates = $scope.backupStates.StateGroups[0];

        /*$scope.$watch('currentStates', function(value, oldValue){
            //alert(value);
            //alert(JSON.stringify(value));
            //$scope.currentStates = (value == "10") ?  States.StateGroups[0] : States.StateGroups[1];
        });*/
    };
</script>
</head>
<body>
<div ng-app ng-controller="Controller">
     <h2 class="page-title">Model</h2>
           <div class="row-fluid">
            <div class="span4">
                <label for="cboGroup">Countries</label>
                <select data-ng-model="selectedCountry">
                        <option value="">Please Select a Country</option>
                      <option ng-repeat='country in Countries.items'           value='{{country.StateGroupID}}'>{{country.name}}</option>
                </select>
            </div>

            <div class="span4">
            <label for="cboItem">States</label>
            <select data-ng-model="selectedState">
                <option value="">Please select a state</option>
                <option ng-repeat='state in getStates()'>{{state.name}}</option>
            </select>
        </div>

        <div class="well">what I am trying to archive is that the items are changing each time the group changes.</div>
        <div>Countries : {{Countries.items | json}}</div>
        <div>States : {{getStates()}}</div>
    </div>

我一直在努力将此代码迁移到Angular 1.4。但我不知道我的代码有什么问题或者代码有什么变化。代码在Angular 1.1.1中完美运行但是当我将角度源更改为带有上层版本的js时，所有都变黑了。

Answer 1

有几件奇怪的事情脱颖而出：

您可以使用ng-model，不带data- *前缀。
$ scope.selectedCountry未在任何地方初始化。
需要使用ng-app指令连接您的应用：ng-app =“my_app”id =“ng-app”
您没有模块或控制器定义

我的建议是找出哪个版本的AngularJS开始破坏你的代码，以及你的代码仍在使用的最新版本。然后阅读发布文档，看看哪些更改可能会破坏您的代码。

无法在代码中使用Angular 1.4.7

1 个答案: