里面NG-CONTENTEDITABLE列表项的双向绑定

本文介绍了里面NG-CONTENTEDITABLE列表项的双向绑定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我期待在使用contenteditable属性，手机列表更新手机名称。我一直在使用NG-变化试过但那不是被解雇。有没有什么办法可以做到这一点？

I am looking to update Phone Name in a list of phones using contenteditable attribute. I have tried using ng-change but thats not getting fired. Is there any way I can do this?

我 Store.Phones

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

所以，现在当我编辑手机的名字，我需要得到它在列表中更新。

So now when I edit Phone name I need to get it updated in the list.

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

I have tried something like this with model pointing to the element. This is not working.

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

此外

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

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

but in this case the method is not getting fired.

推荐答案

的修改的

下面是根据刚刚使用角文档 NG-重复的例子为例。由于 NG-重复创建每个迭代一个新的范围，它不应该是一个问题。

Here's an example based on the example in the Angular docs which just uses ng-repeat. Since ng-repeat creates a new scope for each iteration, it shouldn't be a problem.

<!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

There's an example of how you can do just that here: http://docs.angularjs.org/guide/forms

这是在实现自定义表单控件（使用ngModel）标题。

It's under the "Implementing custom form controls (using ngModel)" header.

这篇关于里面NG-CONTENTEDITABLE列表项的双向绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！