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입니다 요소. 이 방법을 사용하면 "읽기 전용"파일과 편집 할 수있는 파일을 한 번 클릭 할 수 있습니다. , 클릭 리스너

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

:

는 테이블의 HTML 코드는 다음과 같이해야한다

주의 : 코드 형식을 제공하지 않았으며 질문이 너무 일반적입니다. 나는 당신에게 당신이해야할 일반적인 생각을 제공했습니다.

실제로 동일한 목적을 위해 지시문을 사용하는 것이 좋습니다. 모든 지시문은 환경의 복잡성을 뛰어 넘습니다.