ng-list 中 contenteditable 项的两种方式绑定 [英] Two way binding of contenteditable item inside ng-list

查看：22 发布时间：2021/11/9 23:53:47 angularjs contenteditable angularjs-ng-repeat

本文介绍了ng-list 中 contenteditable 项的两种方式绑定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望使用 contenteditable 属性更新电话列表中的电话名称.我试过使用 ng-change 但那没有被解雇.有什么办法可以做到这一点吗?

我有一个 Store.Phones

列表

<li ng-repeat="Phone in Store.Phones"><强内容可编辑>{{Phone.Name}}<ul>

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

我已经尝试过这样的事情，模型指向元素.这不起作用.

{{Phone.Name}}

还有

{{Phone.Name}}

但在这种情况下，该方法不会被触发.

解决方案

编辑

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

<html ng-app="form-example2"><头><script src="http://code.angularjs.org/1.0.5/angular.min.js"></script><脚本>angular.module('form-example2', []).directive('contenteditable', function() {返回 {要求:'ngModel'，链接:函数(范围，榆树，属性，ctrl){//查看 ->模型elm.bind('blur', function() {范围.$应用(函数(){ctrl.$setViewValue(elm.html());});});//模型 ->看法ctrl.$render = function() {elm.html(ctrl.$viewValue);};//从 DOM 加载初始值ctrl.$setViewValue(elm.html());}};});<身体><div ng-repeat="i in [1, 2, 3]"><div contentEditable="true" ng-model="content" title="点击编辑">一些</div><pre>model = {{content}}</pre>

<style type="text/css">div[内容可编辑] {光标:指针；背景颜色:#D0D0D0；}</风格></html>

原创

这里有一个示例说明如何做到这一点:http://docs.angularjs.org/指南/表格

它位于实现自定义表单控件(使用 ngModel)"标题下.

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?

I have a list of 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>

Also

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

but in this case the method is not getting fired.

解决方案

Edit

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>

Original

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

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

这篇关于ng-list 中 contenteditable 项的两种方式绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

ng-list 中 contenteditable 项的两种方式绑定 [英] Two way binding of contenteditable item inside ng-list

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

ng-list 中 contenteditable 项的两种方式绑定 [英] Two way binding of contenteditable item inside ng-list

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭