html - Angularjs:如何根据用户输入更新表的值？

Question

这是我的代码:

<tbody>
<tr ng-repeat="list in results">
        <td>{{list.name}}</td>
        <td contenteditable>{{list.phone}}</td>....
<button class="btn" type="button" style="" ng-click="update(results)">
    Update Data
</button>

用户可以在点击Update Data 按钮时更改电话号码，该记录的电话值应该是用户输入的新值。 如何根据用户输入更新结果记录？

Answer 1

创建您自己的 contenteditable 指令来覆盖基本指令。这是我看到它完成的方式。基本思想是将 ng-model 属性设置为绑定(bind)到元素内部 html。然后只要可编辑内容发生变化，html 就会更新并触发摘要循环。它使用 Angular ngModel Controller 。

HTML

<div contenteditable="true" ng-model="list.phone"></div>

指令

.directive('contenteditable', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {

      element.bind('blur change', function() {
        scope.$apply(function() {
          ngModel.$setViewValue(element.html());
        }); 
      });

      ngModel.$render = function() {
        element.html(ngModel.$viewValue);
      };
    }
  }
});