I would like to selectively control which columns in a table, when I get a response (JSON) back from my server.
HTML:
<div ng-controller='browserStatsController'>
<select id="searchTypeDropdown" name="searchTypeDropdown"
ng-model="searchtype" ng-options="s.value as s.name for s in searchtypelist">
</select>
<input name="BrowserStatsBtn" id="BrowserStatsBtn" type="button"
value="Get Browser Statistics" ng-click="loadBrowserStats()">
<table id="browserDetailView">
<tr class="DataGridHeading">
<th>Browser</th>
<th>Browser Version</th>
<th>Count</th>
<th>Percentage</th>
</tr>
<tr ng-repeat="stat in browserstats">
<td>{{stat.BrowserType}}</td>
<td>{{stat.BrowserVersion}}</td>
<td>{{stat.Count}}</td>
<td>{{stat.Percent}}</td>
</tr>
</table>
In my JS, I have:
myApp.controller('browserStatsController', function ($scope, myFactory) {
$scope.loadBrowserStats = function () {
$scope.asyncObj.args.Search.SearchType = $scope.searchtype;
myFactory.getStatsAsync(function (callback) {
$scope.browserStats = callback.result;
$scope.error = callback.error;
}, $scope.asyncObj);
};
$scope.search = {
SearchType: undefined,
StartDate: undefined,
EndDate: undefined,
TimePeriod: undefined
};
$scope.searchtypelist = [
{
name: 'Browsers Only',
value: 'b'
},
{
name: 'Browser and Version',
value: 'v'
}
];
$scope.asyncObj = {
method: "GetBrowserStats",
args: { Search: $scope.search }
};
});
When I submit my call to my server method, I am providing a value for the type of search being performed ('b' or 'v'). This will affect the shape of the JSON response that comes back: a submitted search type of 'v' will get back a JSON response that includes the BrowserVersion property within the object. (See the ng-repeat, on the tr element, in the table.) A search type of 'b' will not not have this property.
So, I'd like to dynamically control whether the 'Browser Version' column appears in my table, based on the value for search type. I'm new to Angular, so I'm not sure how to go about this. What would you do? Would you dynamically add to the DOM? Would you use jQuery (or something else?) to toggle column visibility in the table?
I spent this morning trying to do this with ng-grid. But, when gridOptions saw the data change, it started endlessly digesting the change -- and I gave up trying to figure out why. (The requests and responses were NOT endlessly repeating..) (Angular 1.2.9)
I need to run in IE 8 with this solution. (Hence the Angular 1.2.9...)
Duplicate disclaimer: I acknowledge that I may be asking a duplicate question. I am currently reading (and trying to understand the answer given for) a similar question, asked here.
Sorry, if I have posted too much code. (The Stackoverflow editor was chiding me for it...) Please let me know if I have been unclear. Or just plain obtuse.
Thank you!