Is it possible to have a select drop down inside of the AngularJS ng-grid?

Question

I have coded the following:

$scope.gridOptions = {
    data: \'myData\',
    enableCellEdit: true,
    multiSelect: false,
    columnDefs: [
        { field: \'I         


        

Answer 1

I can't take credit for the entire solution. I just put the pieces together. My goal was to preserve three-way binding.

Template should look something like this:

        $scope.cellSelectEditableTemplate = '';



COL_FIELD of course essential to keep the reference to correct cell. 


You can capture the change natively:



$scope.$on('ngGridEventEndCellEdit', function (evt) {
            console.log(evt.targetScope.row.entity);
            WaitListArray.$save(evt.targetScope.row.entity)
                .then(function (ref) {
                    console.log('saved');
                });
        });




In this case WaitListArray is my Firebase/AngularFire Array for the table.  Using this method, I was able to preserve my tree-way binding.

Field (ng-options):



{
  field: 'status',
  displayName: 'Status',
  enableCellEditOnFocus: true,
  editableCellTemplate: $scope.cellSelectEditableTemplate,
  cellFilter: 'mapStatus:OptionsList'
}




I added filter to replace id with label for my dropdown values.



.filter('mapStatus', function() {
  return function(input, OptionsList) {
    var _out = 'unknown';
    angular.forEach(OptionsList, function(value, key) {

      if (value && value.id == input) {
        _out = value.label;
      }
    });
    return _out;

  };
})




In the above, OptionsList is my dropdown values array
example: {id:1,label:"label1"}

I found this solution highly reusable. Hopefully, it saves time for someone.
    

             

                                                        
            
            

              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              

                          
             
       
          
              
                                       

     查看其它4个回答


            
                         

                    



               
            

    发布评论:
    

         
                        
    

提交评论