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

这是我的JS ::

// 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 2

您需要使用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>

在这个范围内，您会发现我添加了e- *属性，因为我使用rowform来执行此操作，您可以使用该attrs。但首先，您需要注入可执行模块才能执行此操作。

之后，使用示例，所有字段都会更改值。

完成后，您将修改按钮，更好地遵循以下结构：

<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

如何在AngularJS中创建可编辑的表格？

2 个答案: