AngularJS: How to tell if my controller is bound to my ng-repeat directive element? My data is not showing up
Question
I just need someone to help me understand why my data is not being generated like I am expecting it to. In ajs-partials/add-part.html I am using an ng-repeat directive, but all that is generated when I visit the page is a comment
<!-- ngRepeat p in parts -->.
in place of where the data should be.
I first attempted to find out if the element with ng-repeat directive is being bound correctly to my controller, but I do not even know how to do that.
Any help to go in the right direction will be much appreciated. Thanks in advance. Below is the code.
index.js
....
<html np-app="app">
...
<div id="view-container" ng-view></div>
...
<script src="/Areas/Machine/scripts/angular.min.js"></script>
<script src="/Areas/Machine/scripts/angular-route.min.js"></script>
<script src="/Areas/Machine/scripts/angular-animate.min.js"></script>
<script src="/Areas/Machine/ajs-modules/app.js"></script>
<script src="/Areas/Machine/ajs-controllers/SchedulingController.js"></script>
<script src="/Areas/Machine/ajs-controllers/PartsController.js"></script>
...
ajs-modules/app.js
var app = angular.module('app', ['daypilot', 'ngRoute', 'ngAnimate']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
controller: 'SchedulingController',
templateUrl: '/Areas/Machine/ajs-partials/scheduling.html'
}).when('/scheduler', {
controller: 'SchedulingController',
templateUrl: '/Areas/Machine/ajs-partials/scheduling.html'
}).when('/parts-list', {
controller: 'PartsController',
templateUrl: '/Areas/Machine/ajs-partials/parts-list.html'
}).when('/add-part', {
controller: 'PartsController',
templateUrl: '/Areas/Machine/ajs-partials/add-part.html'
}).when('/add-customer', {
controller: 'CustomerController',
templateUrl: '/Areas/Machine/ajs-partials/add-customer.html'
}).when('/customer-list', {
controller: 'CustomerController',
templateUrl: '/Areas/Machine/ajs-partials/customer-list.html'
}).otherwise({
redirectTo: '/'
});
});
ajs-partials/add-part.html
...
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Part Id</th>
<th>Part Number</th>
<th>Customer Id</th>
<th>Material Id</th>
<th>ProgrammingStatusId</th>
<th>Diameter</th>
<th>Length</th>
<th>Saw Time</th>
<th>Turn Time</th>
<th>Mill Time</th>
<th>QA Time</th>
</tr>
</thead>
<tbody>
<tr class="partsList" class="odd gradeX" data-ng-repeat="p in parts">
<td>{{ p.partId }}</td>
<td>{{ p.partNumber }}</td>
<td>{{ p.customerId }}</td>
<td>{{ p.materialId }}</td>
<td>{{ p.programmingStatusId }}</td>
<td>{{ p.diameter }}</td>
<td>{{ p.length }}</td>
<td>{{ p.sawTime }}</td>
<td>{{ p.turnTime }}</td>
<td>{{ p.millTime }}</td>
<td>{{ p.qaTime }}</td>
</tr>
</tbody>
</table>
...
ajs-controllers/PartsController.js
app.controller('PartsController', function ($scope) {
$scope.parts = [
{partId: 1,partNumber: 12304,customerId: 'Fiber Works',materialId: 'steel',programmingTimeId: 5,diameter: 42,length: 208,sawTime: 0.5,turnTime: 5,millTime: 1,qaTime: 1},
{partId: 2,partNumber: 12303,customerId: 'Tech Tack GO',materialId: 'steel',programmingTimeId: 2,diameter: 36,length: 169,sawTime: 0.5,turnTime: 2,millTime: 1,qaTime: .05},
{partId: 3,partNumber: 12305,customerId: 'Supreme Machine',materialId: 'steel',programmingTimeId: 3,diameter: 15,length: 117,sawTime: 0.25,turnTime: 1,millTime: .5,qaTime: .05}
];
});
FYI, my module (app.js) is linking to each view correctly. I just can't seem to figure out why it is "ignoring" the controller.
4 answers
solution1
1 2014-11-14 00:45:59
try using ng-repeat instead of data-ng-repeat:
<tr class="partsList" class="odd gradeX" ng-repeat="p in parts">
also you can check if the list is empty in your html using:
// controller code
$scope.partsNotEmpty = ($scope.parts.length > 0);
html page:
<div ng-if="partsNotEmpty">List is empty!</div>
solution2
1 2014-11-14 01:14:03
First, add ng-app directive (not np-app ) in the html tag:
<html ng-app="app">
...
</html>
Then add ng-controller directive in the table tag
<table class="table table-striped table-bordered table-hover" ng-controller="PartsController">
....
</table>
Then make sure the JS code looks something like
var app = angular.module('app', [])
.controller('PartsController', function ($scope) {
$scope.parts = [
{partId: 1,partNumber: 12304,customerId: 'Fiber Works',materialId: 'steel',programmingTimeId: 5,diameter: 42,length: 208,sawTime: 0.5,turnTime: 5,millTime: 1,qaTime: 1},
{partId: 2,partNumber: 12303,customerId: 'Tech Tack GO',materialId: 'steel',programmingTimeId: 2,diameter: 36,length: 169,sawTime: 0.5,turnTime: 2,millTime: 1,qaTime: .05},
{partId: 3,partNumber: 12305,customerId: 'Supreme Machine',materialId: 'steel',programmingTimeId: 3,diameter: 15,length: 117,sawTime: 0.25,turnTime: 1,millTime: .5,qaTime: .05}
];
});
Put everything together after omitting some irrelevant details not pertaining to your question, you should have something like in the following plunker
solution3
0 2014-11-14 00:59:37
The HTML does not have the ng-controller containing the data declared, so your ng-repeat can't access the object array. Just add ng-controller="PartsController" , like so:
<tbody ng-controller="PartsController">
<tr class="partsList" class="odd gradeX" data-ng-repeat="p in parts">
solution4
0 ACCPTED 2014-11-14 21:31:57
Just to save confusion and anyone else wanting to implement their angularjs method the same way I did above. Well, the code above is actually correct and it works. It was actually a javascript error that was keeping the angularjs code from executing to the end. So go ahead and refer to my code in the "question" for a correct way to implement a scale-able angularjs app.
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.