如何在Angular js中編輯內容智能表

Question

我對Java腳本來說很新，所以如果這看起來很基本，我必須道歉。

如何使用Angularjs編輯智能表中的行表？新的智能表似乎沒有教程。我想創建一個簡單的表格，讓用戶輸入特定地點的營業時間。

我已經創建了可以在表上添加和刪除行的按鈕，但是當我添加contenteditable =「true」時，更新對象時沒有任何更改會持續。我知道contenteditable是一個獨立於智能表的特定html5參數，但我不明白我還能如何更新數據或者如何檢索更新的數據。

通過mean.js路徑從angularjs控制器中檢索數據。

<div class="controls"> 
    <table st-table="place.openHours" class="table table-striped"> 
     <thead> 
     <tr> 
      <th>Day</th> 
      <th>Opening Time</th> 
      <th>Closing Time</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="row in place.openHours" contenteditable="true" > 
      <td>{{row.day}}</td> 
      <td>{{row.open}}</td> 
      <td>{{row.close}}</td> 
      <button type="button" ng-click="removeOpenHour(row)" class="btn btn-sm btn-danger"> 
       <i class="glyphicon glyphicon-remove-circle"> 
       </i> 
      </button> 
     </tr> 
     </tbody> 
    </table> 

    <button type="button" ng-click="addOpenHour(row)" class="btn btn-sm btn-success"> 
     <i class="glyphicon glyphicon-plus"> 
     </i> Add new Row 
    </button> 
</div> 

的JavaScript內部：

$scope.removeOpenHour = function removeOpenHour(row) { 
     var index = $scope.place.openHours.indexOf(row); 
     if (index !== -1) { 
      $scope.rowCollection.splice(index, 1); 
     } 
    } 

    $scope.addOpenHour = function addOpenHour() { 
     $scope.place.openHours.push(
     { 
      day: 'Monday', 
      open: 540, 
      close: 1080 
     }); 
    }; 

Answer 1

感謝我周圍看了一下，從這裏http://jsfiddle.net/bonamico/cAHz7/使用的代碼和我的代碼合併它。

HTML文件：

<tr ng-repeat="row in place.openHours"> 
    <td><div contentEditable="true" ng-model="row.day">{{row.day}}</div></td> 
    <td><div contentEditable="true" ng-model="row.open">{{row.open}}</div></td> 
    <td><div contentEditable="true" ng-model="row.close">{{row.close}}</div></td> 
    <td> 
    <button type="button" ng-click="removeOpenHour(row)" class="btn btn-sm btn-danger"> 
     <i class="glyphicon glyphicon-remove-circle"> 
     </i> 
    </button> 
</td> 

JS文件：

myApp.directive('contenteditable', function() { 
return { 
    require: 'ngModel', 
    link: function(scope, elm, attrs, ctrl) { 
     // view -> model 
     elm.bind('blur', function() { 
      scope.$apply(function() { 
       ctrl.$setViewValue(elm.html()); 
      }); 
     }); 

     // model -> view 
     ctrl.render = function(value) { 
      elm.html(value); 
     }; 

     elm.bind('keydown', function(event) { 
      console.log("keydown " + event.which); 
      var esc = event.which == 27, 
       el = event.target; 

      if (esc) { 
       console.log("esc"); 
       ctrl.$setViewValue(elm.html()); 
       el.blur(); 
       event.preventDefault(); 
      } 

     }); 

    } 
}; 
}); 

Answer 2

我的解決辦法是：

角指令：

app.directive("markdown", function() { 

    return { 
    restrict: 'EA', 
    scope: { 

     value: '='}, 
    template: '<span ng-click="edit()" ng-bind="value"></span><input ng-blur="blur()" ng-model="value"></input>', 
    link: function($scope, element, attrs) { 
     // Let's get a reference to the input element, as we'll want to reference it. 
     var inputElement = angular.element(element.children()[1]); 

     // This directive should have a set class so we can style it. 
     element.addClass('edit-in-place'); 

     // Initially, we're not editing. 
     $scope.editing = false; 

     // ng-click handler to activate edit-in-place 
     $scope.edit = function() { 
      $scope.editing = true; 

      // We control display through a class on the directive itself. See the CSS. 
      element.addClass('active'); 

      // And we must focus the element. 
      // `angular.element()` provides a chainable array, like jQuery so to access a native DOM function, 
      // we have to reference the first element in the array. 
      inputElement[0].focus(); 
     }; 

     // When we leave the input, we're done editing. 

     $scope.blur = function() { 
      $scope.editing = false; 
      element.removeClass('active'); 
     } 
    } 
    }; 

}); 

HTML：

<table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped"> 

    <thead> 
     <tr> 
      <th st-sort="sku">SKU</th> 
      <th st-sort="skuSupplier">SKU proveedor</th> 
      <th st-sort="name">Descripción</th> 
      <th st-sort="cantidad">Cantidad</th> 
      <th st-sort="precio">Precio unitario</th> 
      <th st-sort="total">Total</th> 
     </tr> 
     <tr> 
      <th colspan="5"><input st-search="" class="form-control" placeholder="Buscar producto ..." type="text"/></th> 
      </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="row in displayedCollection"> 
      <td><markdown value="row.sku"></markdown></td> 
      <td><markdown value="row.skuSupplier"></markdown></td> 
      <td><markdown value="row.name"></markdown></td> 
      <td><markdown value="row.cantidad"></markdown></td> 
      <td><markdown value="row.precio"></markdown></td> 
      <td><markdown value="row.total"></markdown></td> 
      <td> 
       <button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger"> 
       <i class="glyphicon glyphicon-remove-circle"></i> 
       </button> 
      </td> 
     </tr> 
    </tbody> 
    </table>