Add column in table by merging object attributes

Here is a plunker I made. Whats the best approach to merge $scope.blacklistinto $scope.friends when ng-click="showColumn('Blacklist');" is fired, finally a new column called Coming need to be added 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>
            </tr>
          </tbody>
        </table>
      </div>
    </div>


Source: css3

Leave a Reply