<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>
On Tuesday, December 1, 2015 at 3:28:47 PM UTC-5, Nick Hudson wrote:
>
> 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.
