AngularJSで編集可能なテーブルを作成するにはどうすればよいですか？

Question

私はそれを編集できるようになるまで、ngTableを使ってテーブルを作成しました。

編集、削除、追加するボタンがありますが、機能しません。間違いなく私にコンソールを与えます。私はAPIの例をコピーしました。おそらくそれは私のコードに実装することができなかったためにうまくいかないためです。別の例を入れていただければ幸いです。

// SORT TABLE --> 
     function refresh(){ 
      vm.tableParams = new ngTableParams({ 
       page: 1,    
       count: 10, 
       filter: { 
        id: '', 
        curso: '', 
        precio: '', 
        new: '', 
        url_curso: '' 
       }, 
       sorting: { 
        id: 'asc'  
        } 
       },{ 
        data: vm.datos 
        } 
      ); 
     } 
    //EDIT TABLE 

     vm.checkId = function(data, id){ 
      if (id === 2 && data !== 'awesome'){ 
       return ''; 
      } 
     }; 

     vm.saveUser = function(data, id){ 
      angular.extend(data, {id:id}); 
      console.log('Saving user: '+id) 
     }; 

     vm.removeUser = function(index){ 
      vm.test.splice(index,1); 
     }; 

     vm.addUser = function(){ 
      vm.inserted ={ 
       id: vm.datos.length+1, 
       curso: '', 
       precio: null, 
       url_curso: '', 
       new: true 
      }; 
      vm.datos.push(vm.inserted); 
     }; 
    }; 
})(); 

Answer 1

あなたは*あなたは、私はE-を追加したことがわかりますtdのスパンで

<td data-title="'IDCurso'" filter="{id: 'number'}" sortable="'id'"> 
     <span editable-number="curso.id" e-name="id" e-form="rowform" e-required="">{{curso.id}}</span> 
    </td> 

とスパンを追加する必要があります属性、それは私がそれを行うためにrowformを使用するので、あなたはそのattrsを使用することができます。しかし、まず、xeditableモジュールを注入する必要があります。

その後、すべてのフィールドが値を変更している例を使用します。

あなたがそれを終えたら、あなたはより良いその構造従って、あなたのボタンを変更します：あなたはあなたのケースで必要

<form editable-form="" name="rowform" onbeforesave="datos.saveUser($data, curso.id)" ng-show="rowform.$visible" shown="datos.inserted == curso" class="form-buttons form-inline"> 
      <button type="submit" ng-disabled="rowform.$waiting" title="Save" class="btn btn-sm btn-info"> 
       <em class="fa fa-save"></em> 
      </button> 
      <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" title="Cancel" class="btn btn-sm btn-default"> 
       <em class="fa fa-times"></em> 
      </button> 
     </form> 
     <div ng-show="!rowform.$visible" class="buttons"> 
      <button ng-click="rowform.$show()" title="Edit" class="btn btn-sm btn-info"> 
       <em class="fa fa-pencil"></em> 
      </button> 
      <button ng-click="datos.removeUser($index,curso.id)" title="Delete" class="btn btn-sm btn-danger"> 
       <em class="fa fa-trash"></em> 
      </button> 
     </div> 

変更値を、そしてそれがどのように動作するかを確認するために、それを研究、あなたは見つけることができますコントローラのメソッドと多くのngTablesがこのページにあります： enter link description here

Answer 2

これは私のJS IS ::

// SORT TABLE --> 
     function refresh(){ 
      vm.tableParams = new ngTableParams({ 
       page: 1,    
       count: 10, 
       filter: { 
        id: '', 
        curso: '', 
        precio: '', 
        new: '', 
        url_curso: '' 
       }, 
       sorting: { 
        id: 'asc'  
        } 
       },{ 
        data: vm.datos 
        } 
      ); 
     } 
    //EDIT TABLE 

     vm.checkId = function(data, id){ 
      if (id === 2 && data !== 'awesome'){ 
       return ''; 
      } 
     }; 

     vm.saveUser = function(data, id){ 
      angular.extend(data, {id:id}); 
      console.log('Saving user: '+id) 
     }; 

     vm.removeUser = function(index){ 
      vm.test.splice(index,1); 
     }; 

     vm.addUser = function(){ 
      vm.inserted ={ 
       id: vm.datos.length+1, 
       curso: '', 
       precio: null, 
       url_curso: '', 
       new: true 
      }; 
      vm.datos.push(vm.inserted); 
     }; 
    }; 


})();