Angular is not displaying data in table row. ng-repeat is not working
Question
I'm trying to use Angularjs. The problem is, ng-repeat not working when it is in the route. It works when it is not in route.
Here's what I have so far: See the links..
this works well... http://plnkr.co/edit/1syQFJdMyRUYncBrREue?p=preview
but in this, it didn't work now..(navigate in persons) http://plnkr.co/edit/gsi2mZpnU0YJUUOa20DO?p=preview
html
<html ng-app="myApp">
<head>
<title>Confirm Dialog Box</title>
<!--
in the link above i create a custom dialog box
-->
</head>
<body>
<div ng-controller="loglistController">
<table>
<tr ng-repeat="x in names">
<td onclick="showDialog()" ng-click="showInEdit(x)">{{ x.Name }}</td>
<td onclick="showDialog()" ng-click="showInEdit(x)">{{ x.Country }}</td>
</tr>
</table>
<div id="white-background">
</div>
<div id="dlgbox">
<div id="dlg-header"><h3>Information</h3></div>
<div id="dlg-body">
Name <input type="text" ng-model="selectedPerson.Name" /><br/>
Country <input type="text" ng-model="selectedPerson.Country" /><br/>
</div>
<div id="dlg-footer">
<button onclick="dlgOK()">Update</button>
<button onclick="dlgCancel()">Exit</button>
</div>
</div>
angular
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('loglistController', ['$scope', '$http', function ($scope, $http) {
$scope.data=[];
$scope.selectedPerson={ Name:"",Country:""};
$http.get("loglistajax.php")
.then(function (response) {$scope.names = response.data.records;});
$scope.showInEdit=function(person){
$scope.selectedPerson = person;
};
}]);
3 answers
solution1
2 2015-12-18 18:12:50
Here is my version
I agree with most points that imbalind mentioned.
Just would like to add few more:
we should not instantiate same app multiple times (in original Plunker we had it in both index.html and list.html). Here are two cases:
var myApp = angular.module('myApp', ['ngRoute']); //new instance of 'myApp' var myApp = angular.module('myApp'); //simply handle to 'myApp'we had two
'loglistController'that belong to sameangular.module, which not going to workangular itself was loaded in both html files, not good.
for that particular Plunker, fixed route in app.js:
.when('/', { templateUrl: '/index.html', controller: 'mainController' })and please don't mixup jQuery script, it will create a lot of confusion later...
solution2
1 ACCPTED 2015-12-18 17:45:08
Here is a (somewhat) fixed plunker , however I found the following issues in your code:
You have double controllers:
loglistControlleris defined twice, once insideapp.jsand then again insidelist.html.You wrote the following line
<tr ng-repeat="x in data">Thinking it would read from
loglistController's$scope.databut your app seems to be considering the first controller, so your controller scope has no data properties. I solved replacing the controller inapp.jswith the one insidelist.html.Thinking about it, I guess you are not allowed to put a route controller's code inside it's template, so you'd better avoid doing that in the future!
Your
app.js'templateUrldoes not exists when url is'/'and this throws an error. I solved by replacing it with'list.html'. I'm quite sure it's not what you will want, but it was needed to make it work.
solution3
0 2015-12-18 17:33:10
are you sure your $http request is resolving?
$http.get("loglistajax.php").then(function (response) {
$scope.names = response.data.records;
}).catch(function(response) {
console.log("I am failing to resolve a non-2xx response");
});
initially try without the $http request using dummy data n build up slowly!
FYI ...
you can do ...
$scope.names = $http.get("loglistajax.php");
Which only works if the HTTP request resolve!
PS neither of your plunkr's show anything!
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.