angularjs – ng-list中的可内容项目的双向绑定

发布时间：2020-12-17 07:39:24 所属栏目：安全来源：网络整理

导读：我正在寻找使用contenteditable属性更新手机列表中的电话名称.我已经尝试使用ng-change,但是没有被解雇.有什么办法可以做到吗？我有一个Store.Phones的列表 ul class="store" li ng-repeat="Phone in Store.Phones" strong contenteditable {{Phone.Name}}/

我正在寻找使用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>

但在这种情况下,该方法没有被解雇.

编辑

这是一个基于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)”标题下.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!