简体   繁体   English

无法在代码中使用Angular 1.4.7

[英]Can't use Angular 1.4.7 in Code

I have this code: 我有以下代码:

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

What I have been struggling with is migrating this code to Angular 1.4.But I don't know what's wrong with my code or what to change in it. 我一直在努力的将这段代码迁移到Angular 1.4中,但是我不知道我的代码有什么问题或更改了哪些内容。 The code is working flawlessly in Angular 1.1.1 but when I change the angular source to a js with upper version, all goes black. 该代码在Angular 1.1.1中可以正常工作,但是当我将Angular源更改为具有较高版本的js时,所有代码都变黑了。

A couple of odd things stand out: 一些奇怪的事情脱颖而出:

  1. You can use ng-model, without the data-* prefix. 您可以使用不带data- *前缀的ng-model。

  2. $scope.selectedCountry is not initialized anywhere. $ scope.selectedCountry不会在任何地方初始化。

  3. need to connect your app with the ng-app directive: ng-app="my_app" id="ng-app" 需要使用ng-app指令连接您的应用程序:ng-app =“ my_app” id =“ ng-app”

  4. you don't have a module or controller definition 您没有模块或控制器定义

My recommendation is to figure out which version of AngularJS starts to break your code and what the most recent one is that your code still works with. 我的建议是弄清楚哪个版本的AngularJS开始破坏您的代码,以及您的代码仍然可以使用的最新版本。 Then read the release docs and see what changes were made that may be breaking your code. 然后阅读发行文档,查看所做的更改可能会破坏您的代码。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM