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

创建您自己的内容可编辑指令，覆盖基本指令。这是我看到它完成的方式。基本思想是将ng-model属性设置为绑定到元素内部html。然后，每当可编辑内容发生更改时，都会更新 html 并触发摘要周期。它利用了Angular ngModel控制器。

.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);
      };
    }
  }
});

Answer 2

我在 Zack 的答案中向我的指令添加了以下代码，它可以工作。

scope: {
eventHandler: '&ngClick'
},

Answer 3

试试这段代码，它就像一个键...

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

和

Js 代码

var xxx = [];
        $scope.results = xxx;
        if ($scope.results.length == 0) {
            $scope.results = [{ name: "ramesh", phone: "123" }, { name: "ramesh1", phone: "1231" }, { name: "ramesh2", phone: "1232" }, { name: "ramesh3", phone: "1233" }];
        }
        $scope.update = function (index) {
            $scope.results[index.$index].phone =  "100";
            $scope.$apply();
            xxx = $scope.results;
        }

请参阅：http://jsfiddle.net/d8CD9/4/