如何在 AngularJS 中实现对数据表的内联编辑？

Question

我正在尝试在 AngularJS 中实现对数据表的内联编辑。我试图找到一些例子，但我找不到。有一个很好的例子here，但它与 AngularJS 不兼容。那么，我如何在 AngularJS 中实现它呢？

我项目中的相关代码：

<tbody>
    <tr ng-repeat="meal in meals">
        <td>{{ meal.id }}</td>
        <td>{{ meal.name }}</td>
        <td>
            <a ng-click="open_yemek('lg', meal.name, meal.recipe, meal.ingredients)">Tıklayın</a>
        </td>
        <td class="text-center">
            <!--<small class="label label-warning" style="font-size: 9px !important;"><i class="fa fa-clock-o"></i> {{ yemek.sure }}</small>-->
            {{ meal.time }}
        </td>
        <td>{{ meal.category }}</td>
        <td>{{ meal.region }}</td>
        <td>{{ meal.user }}</td>
        <td class="text-center">{{ meal.rank }}/10</td>
        <td>{{ meal.status }}</td>
        <td>
            <i ng-click="editItem($index)" class="fa fa-pencil-square-o" aria-hidden="true"></i>
            <a ng-click="removeItem('yemekler',$index)"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
            <a ng-click="addItem('yemekler')"><i aria-hidden="true" class="fa fa-plus"></i></a>
        </td>
    </tr>
</tbody>

这是JS：

$scope.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('lengthMenu', [5, 10, 15])
    .withOption('autoWidth', true);

$scope.meals = {};

mealFactory.get()
    .success(function(data) {
        console.log(data);
        $scope.meals = data;
    });

Answer 1

我的建议是在 td 元素内使用带有 <input> 标签的 ng-include。 这样，您将能够拥有一个“只读”的 td 和一个可编辑的，只需单击一下即可。

你的表格的 HTML 代码应该是这样的：

<tbody>
   <tr ng-repeat="row in data track by $index"> 
      <td> </td>
      <td ng-click="makeEditable($index)" ng-include="{{row.isEditable ? 'editableInput.html' : 'readonly.html'}}"> </td>
      <td> </td>
   </tr>
</tbody>

使用一些模板：

<script type="text/ng-template" id="editableInput.html">
     <input type="text" ng-model="row.value"></input>
</script>

<script type="text/ng-template" id="readonly.html">
     <span>{{row.value}}</span>
</script>

在你的控制器中，点击监听器：

$scope.makeEditable = function($index){
   //remove every previous editable input...
   if($scope.lastDataEditable != null)
      $scope.lastDataEditable = false;

   $scope.data[$index].isEditable = true;
   $scope.lastDataEditable = $scope.data[$index];
}

注意：您没有提供任何形式的代码，而且您的问题有点过于笼统。我向您提供了您应该做的一般想法。

事实上，您还应该考虑将指令用于相同目的：这完全取决于您环境的复杂性。