Hi, I'm new to AngularJS and I'm running into an issue when using
directives (like ng-repeat) to populate lists (via arrays & JSON files), or
even return object properties in general. For some reason, list data and
object property values don't show up (I'm not seeing any errors in the
console). Here's my code:
<!doctype html>
<html ng-app="fapApp">
<head>
<script src="js/angular.js"></script>
<script>
var fapApp = angular.module('fapApp', []);
fapApp.controller('nCtrl', function($scope) {
$scope.fName = 'John';
// $scope.lName = 'Smith';
$scope.$watch('lName', function(newValue, oldValue) {
console.log('New value is ' + newValue);
});
setTimeout(function(){
$scope.lName = 'Smith';
$scope.$apply();
}, 3000);
$scope.names = ['Larry', 'Curly', 'Moe']
$scope.addName = function() {
$scope.names.push($scope.enteredName);
$scope.enteredName = '';
};
$scope.removeName = function(name) {
var i = $scope.names.indexOf(name);
$scope.names.splice(i, 1);
};
// $scope.person = ['name', 'hudson']
});
fapApp.controller('cCtrl', function($scope) { // cCtrl contains
first list where data doesn't show up
$scope.countries = [
{'name' : 'China', 'population' : 185734323},
{'name' : 'India', 'population' : 934224594},
{'name' : 'U.S.A.', 'population' : 582434043}
];
});
fapApp.controller('cCtrl2', function($scope, $http) { // cCtrl2
contains second list where data doesn't show up
$http.get('countries.json').success(function(data) {
$scope.countries = data;
});
});
</script>
</head>
<body>
<div ng-controller="nCtrl">
<label>Name:</label><br />
<input type="text" ng-model="fName" placeholder="Enter a name
here"><br />
<input type="text" ng-model="lName" placeholder="Enter a name
here"><br />
<input type="text" ng-model="blah" placeholder="Enter a name here">
<hr>
<h1>Hello {{fName}} {{lName}}!</h1>
<ul>
<li ng-repeat="name in names">{{name}}
<a href="" ng-click="removeName(name)">Remove</a></li>
</ul>
<form ng-submit="addName()">
<input type="text" ng-model="enteredName">
<input type="submit" value="add">
</form>
</div>
<table ng-controller="cCtrl">
<tr>
<th>Country</th>
<th>Population</th>
</tr>
<tr ng-repeat"country in countries">
<td>{{country.name}}</td>
<td>{{country.population}}</td>
</tr>
</table>
<table ng-controller="cCtrl2">
<tr>
<th>Country</th>
<th>Code</th>
</tr>
<tr ng-repeat"country in countries">
<td>{{country.name}}</td>
<td>{{country.code}}</td>
</tr>
</table>
</body>
</html>
Here's a link to the Plunk:
http://plnkr.co/edit/I35DhhdBuxYlpP9vYnQJ
I'm using version 1.4.8, and the JSON file referenced in the code is a
simple list of countries and codes (can be found here:
https://gist.github.com/Keeguon/2310008, also included in the Plunk). Any
help would be greatly appreciated. Thanks!
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
