Angularjs:当用户点击进入时更改表格单元格的值

时间:2014-03-03 04:19:29

标签: angularjs events angularjs-directive angularjs-ng-change

这是我的表

<tr ng-repeat="list in results">
    <td>{{list.name}}</td>
    <td>{{list.id}}</td>
    <td ng-model="phone" contenteditable on-keydown="myFunction(results)" keys="[13]">
     {{list.phone}}
    </td>

用户可以编辑电话号码并按Enter键。如何将list.phone的值更新为新输入的值? 例如,最初的结果如下所示

[name:John, id:123, phone:123456],[]....

但是当用户输入7890123时 然后新的结果看起来像这样

[name:John, id:123, phone:7890123],[]...

我该怎么做?这是我的指示

编辑:

angular.module('myApp').directive('onKeydown', function() {
            return function(scope, elm, attrs) {
                function applyKeydown() {
                  scope.$apply(attrs.onKeydown);
                };           
                var allowedKeys = scope.$eval(attrs.keys);
                elm.bind('keydown', function(evt) {
                    if (!allowedKeys || allowedKeys.length == 0) {
                        applyKeydown();
                    } else {
                        angular.forEach(allowedKeys, function(key) {
                            if (key == evt.which) {
                                applyKeydown();
                            }
                        });
                    }
                });
            };
        });
    });

1 个答案:

答案 0 :(得分:0)

不要直接将数据挂接到表单,而是尝试将数据放入编辑模型,然后在方法调用之后应用它。

以下是一个示例,并非针对您的情况,但您可以将此方法应用于您的用例。 Example on Plnkr