AngularJSのデータセットでインライン編集を実装する方法は？

Question

私はAngularJSのデータセットでインライン編集を実装しようとしています。私はいくつかの例を見つけようとしていましたが、できませんでした。良い例はhereですが、AngularJSとの互換性はありません。では、AngularJSでどのように実装できますか？

私のプロジェクトから

関連コードは：

$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を-含ま：

<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です素子。 このようにすれば、「読み込み専用」と編集可能なものを1回のクリックで開くことができます。

あなたのテーブルのあなたのHTMLコードは次のようなものでなければなりません

：

<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]; 
} 

いくつかのテンプレートを使用して

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

注意：コードの形式を指定していないため、あなたの質問はあまりにも一般的です。私はあなたにあなたがすべき一般的な考えを提供しました。

実際には、同じ目的のためにディレクティブを使用することも検討してください。すべての環境が複雑になります。