12

我正在寻找使用 contenteditable 属性更新电话列表中的电话名称。我曾尝试使用 ng-change，但没有被解雇。有什么办法可以做到这一点吗？

我有一个清单Store.Phones

<ul class="store">
  <li ng-repeat="Phone in Store.Phones">
     <strong contenteditable> {{Phone.Name}}</strong>
  </li>
<ul>

所以现在当我编辑电话名称时，我需要在列表中更新它。

我已经尝试过这样的事情，模型指向元素。这是行不通的。

<strong ng-model='Store.Phones[$index].Name'> {{Phone.Name}}</strong>

还

<strong ng-model='PhoneName' ng-change='PhoneNameChanged()'> {{Phone.Name}}</strong>

但在这种情况下，该方法不会被解雇。

4

2 回答 2

17

编辑

这是一个基于 Angular 文档中示例的示例，该示例仅使用ng-repeat. 由于ng-repeat为每次迭代创建了一个新的范围，所以这应该不是问题。

<!doctype html>
<html ng-app="form-example2">
<head>
    <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
    <script>
    angular.module('form-example2', []).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() {
                    elm.html(ctrl.$viewValue);
                };

                // load init value from DOM
                ctrl.$setViewValue(elm.html());
            }
        };
    });
    </script>
</head>
<body>
    <div ng-repeat="i in [1, 2, 3]">
        <div contentEditable="true" ng-model="content" title="Click to edit">Some</div>
        <pre>model = {{content}}</pre>
    </div>
    <style type="text/css">
    div[contentEditable] {
        cursor: pointer;
        background-color: #D0D0D0;
    }
    </style>
</body>
</html>

原来的

这里有一个例子说明你如何做到这一点：http: //docs.angularjs.org/guide/forms

它位于“实现自定义表单控件（使用 ngModel）”标题下。

于 2013-02-27T09:40:06.370 回答
4

只需删除ctrl.$setViewValue(elm.html());

链接到http://jsfiddle.net/blingz/B5UbE/12/

于 2013-05-27T09:41:38.163 回答