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属性设置为绑定到元素inner 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 Code

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/

Angularjs：如何根据用户输入更新表的值？

3 个答案: