Can't use Angular 1.4.7 in Code
Question
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. 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.
1 answers
solution1
0 ACCPTED 2015-10-29 21:02:50
A couple of odd things stand out:
You can use ng-model, without the data-* prefix.
$scope.selectedCountry is not initialized anywhere.
need to connect your app with the ng-app directive: ng-app="my_app" id="ng-app"
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. Then read the release docs and see what changes were made that may be breaking your code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.