Populating jquery mobile table with angularjs
Question
I had a table that was developed just using angularjs with help from a library: angular-smart-table . This worked fine but I wanted more features so I want to use jquery mobile . The problem I'm having is the table is forming with the titles but the rows that I'm repeating over don't show any data and my js debugging isn't showing any errors. Here is my code:
html:
<body ng-controller="MyMainController as cont">
<section ng-controller="PanelController as panel">
<span>
*span items*
</span>
<div class="panel" ng-show="panel.isSelected(1)">
<table data-role="table" id="table-custom-2" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="b" data-column-btn-text="Columns" data-column-popup-theme="a">
<thead>
<tr class="ui-bar-d">
<th></th>
<th data-priority="1" st-sort="account">Account #</th>
<th st-sort="name">Campaign Name</th>
<th data-priority="4">Comments</th>
<th data-priority="2" st-sort="priority">Priority</th>
<th data-priority="2" st-sort="zipCode">Zip Code</th>
<th data-priority="2" st-sort="address">Address</th>
<th data-priority="2" st-sort="status">Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in cont.tableRows">
<td>{{row.checked}}</td>
<td>{{row.account}}</td>
<td>{{row.name}}</td>
<td>{{row.comments}}</td>
<td>{{row.priority}}</td>
<td>{{row.zipCode}}</td>
<td>{{row.address}}</td>
<td>{{row.status}}</td>
</tr>
</tbody>
</table>
</div>
<div class="panel" ng-show="panel.isSelected(2)" id="map-canvas">
Map
</div>
</section>
*my javascript tags*
</body>
js:
(function(){
var myVar = angular.module('cont', []);
myVar.controller('MyMainController', ['$scope', '$filter', function (scope, filter){
scope.tableRows = [
{
checked: false,
account: 1,
name: "Name1",
comments: "Comments`",
priority: "High",
zipCode: 11111,
address: "Address",
status: "Active"
},
{
checked: true,
account: 2,
name: "Name2",
comments: "Comments2",
priority: "Medium",
zipCode: 22222,
address: "Address2",
status: "Active"
},
{
checked: false,
account: 3,
name: "Name3",
comments: "Comments3",
priority: "Low",
zipCode: 33333,
address: "Address3",
status: "Active"
},
{
checked: false,
account: 4,
name: "Name4",
comments: "",
priority: "Low",
zipCode: 44444,
address: "Address4",
status: "Active"
}];
}]);
leadPlanning.controller('PanelController', function(){
this.tab = 1;
this.selectTab = function(setTab) {
this.tab = setTab;
}
this.isSelected = function(checkTab) {
return this.tab === checkTab;
}
});
})();
as I said, the row with the column headers shows fine but the actual data doesn't which leads me to believe that there is an issue with my ng-repeat. The table that I had before that was actually showing the data is basically the same code except in the <table> tag I had: st-table="tableRows" (for the smart table library) and then my repeat was: ng-repeat="row in tableRows" . This is my first time working with both angularjs and jquery mobile so any help would be much appreciated!
1 answers
solution1
2 ACCPTED 2015-01-19 16:09:00
It does not repeat because you have not attached tableRows to the controller instance @ scope.tableRows , instead it is on the scope and you are referring to it from the controller instance alias by doing cont.tableRow .
Try:-
this.tableRows = [...
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.