Check out this plunker I created. What is the most efficient way to merge the contents of $scope.blacklist
into $scope.friends
when
ng-click="showColumn('Blacklist');"
is triggered, and also add a new column named Coming
to the table.
Ng-App & Ng-Controller
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', MainCtrl]);
function MainCtrl($scope, $http) {
$scope.friends = [{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'}];
$scope.coming = [{coming: 'x'},
{coming: 'x'},
{coming: 'x'},
{coming: 'x'},
{coming: 'x'}];
$scope.showColumn = function (type) {
if (type === 'coming') {
// INSERT Code here
console.log('Try add column coming');
}
}
$scope.getFilter = function () {
return $scope.filter;
};
$scope.setFilter = function (filter) {
$scope.filter = filter;
};
}
View
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<hr />
<a ng-click="showColumn('coming');">Show "coming"</a>
<hr />
<table class="table">
<tbody>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr ng-repeat="friend in friends | filter:getFilter()">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td ng-repeat="come in coming">{{come.coming}}</td>
</tr>
</tbody>
</table>
</div>
</div>