角型UIグリッド - 列の追加または削除とデータの更新

Question

グリッドから列を追加/削除してデータを更新しようとしています。私たちは、ボタンを '追加' をクリックすると、私はcolumnDefsとdataを更新するために期待していのに対し、ここでPlunker

HTML

<div ng-controller="MainCtrl"> 
    <div id="grid1" ui-grid="settings" class="grid"></div> 

    <button ng-click="add();">Add</button> 
    </div> 

が

app.controller('MainCtrl', ['$scope', function($scope) { 
    $scope.result = [{ 
    "firstName": "Cox", 
    "lastName": "Carney", 
    "company": "Enormo", 
    "employed": true 
    }, { 
    "firstName": "Lorraine", 
    "lastName": "Wise", 
    "company": "Comveyer", 
    "employed": false 
    }, { 
    "firstName": "Nancy", 
    "lastName": "Waters", 
    "company": "Fuelton", 
    "employed": false 
    }]; 

    $scope.column_defs = [{ 
    name: 'First Name', 
    field: 'firstName' 
    }, { 
    name: 'Last Name', 
    field: 'lastName' 
    }, { 
    name: 'Company', 
    field: 'company' 
    }]; 

    $scope.settings = { 
    data: $scope.result, 
    columnDefs: $scope.column_defs 
    }; 

    $scope.add = function() { 
    $scope.column_defs = [{ 
     name: 'First Name', 
     field: 'firstName' 
    }, { 
     name: 'Last Name', 
     field: 'lastName' 
    }, { 
     name: 'Company', 
     field: 'company' 
    }, { 
     name: 'Employed', 
     field: 'employed' 
    }]; 

    $scope.result = [{ 
     "firstName": "Cox", 
     "lastName": "Carney", 
     "company": "Enormo", 
     "employed": true 
    }, { 
     "firstName": "Lorraine", 
     "lastName": "Wise", 
     "company": "Comveyer", 
     "employed": false 
    }]; 
    }; 
}]); 

JSで、何も起こりません。

ありがとうございます。

Answer 1

UIグリッドは$scope.settingsにバインドされます。グリッドをリフレッシュするには、変数$scope.settingsをリフレッシュする必要があります。 $scope.addでこれを追加：

は

$scope.settings = { 
    data: $scope.result, 
    columnDefs: $scope.column_defs 
    }; 

Answer 2

ここに私のplunkrです：http://plnkr.co/edit/avgavSB3hufCXHfe4nyX?p=preview それはあなたがgrid.columnDefsオブジェクトにプッシュ/ポップ/スプライスを使用することができることを示しています。

HTML

<div ng-controller="MainCtrl"> 
    <div id="grid1" ui-grid="settings" class="grid"></div> 
    <button ng-hide="employedVisible" ng-click="add();">Add</button> 
    <button ng-show="employedVisible" ng-click="remove();">Remove</button> 
    </div> 

`JS

var app = angular.module('app', ['ngTouch', 'ui.grid']); 

app.controller('MainCtrl', ['$scope', function($scope) { 
    $scope.settings = { 
    data: [{ 
     "firstName": "Cox", 
     "lastName": "Carney", 
     "company": "Enormo", 
     "employed": true 
    }, { 
     "firstName": "Lorraine", 
     "lastName": "Wise", 
     "company": "Comveyer", 
     "employed": false 
    }, { 
     "firstName": "Nancy", 
     "lastName": "Waters", 
     "company": "Fuelton", 
     "employed": false 
    }], 
    columnDefs: [{ 
     displayName: 'First Name', 
     name: 'firstName' 
    }, { 
     displayName: 'Last Name', 
     name: 'lastName' 
    }, { 
     displayName: 'Company', 
     name: 'company' 
    }] 
    }; 

    $scope.add = function() { 
    for(var i = $scope.settings.columnDefs.length; i--;){ 
     if ($scope.settings.columnDefs[i].name === 'employed') { 
     // Only add it once 
     return; 
     } 
    } 
    $scope.settings.columnDefs.push({ 
     displayName: 'Employed', 
     name: 'employed' 
    }); 
    $scope.employedVisible = true; 
    }; 

    $scope.remove = function() { 
    for(var i = $scope.settings.columnDefs.length; i--;){ 
     if ($scope.settings.columnDefs[i].name === 'employed') { 
     $scope.settings.columnDefs.splice(i, 1); 
     $scope.employedVisible = false; 
     return; 
     } 
    } 
    }; 
}]);