Двупосочно обвързване на редактиран елемент в ng-списък

Търся да актуализирам името на телефона в списък с телефони, използвайки атрибута 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>

но в този случай методът не е уволнение.


angularjs contenteditable angularjs-ng-repeat
person Phani    schedule 27.02.2013    source източник

Отговори (2)


arrow_upward
17
arrow_downward

Редактиране

Ето един пример, базиран на примера в документите на 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)“.

person Anders Ekdahl    schedule 27.02.2013
comment
Да, виждал съм това, но имам проблеми, когато елементът, който редактирам, е в списък. - person Phani; 27.02.2013
comment
Добавих пример, който използва ng-repeat. - person Anders Ekdahl; 27.02.2013
comment
Допълнителен въпрос: как да задам първоначалната стойност за contentEditable div? След обвързване на ng-модела div вече не приема {{ content }}. jsfiddle.net/B5UbE/3 - person yayitswei; 20.03.2013

arrow_upward
4
arrow_downward

просто премахнете ctrl.$setViewValue(elm.html());

връзка към http://jsfiddle.net/blingz/B5UbE/12/

person Miro    schedule 27.05.2013