AngularJS: Cập nhật một đầu vào với một ng-mô hình động làm mờ trên mỗi phím bấm

Question

jsFiddle để chứng minh vấn đề: http://jsfiddle.net/yoxigen/xxTJc/

Tôi đang xây dựng một hình thức nhỏ để chỉnh sửa tất cả các thuộc tính của một đối tượng. Đối với điều đó, tôi có một repeater cho các thuộc tính. Mỗi thuộc tính có đầu vào của nó:

<ul ng-controller="myController"> 
    <li ng-repeat="(property, value) in obj"> 
     <input ng-model="obj[property]"/><span>{{value}}</span> 
    </li> 
</ul> 

Mỗi khi một phím được nhấn vào đầu vào, giá trị bên cạnh nó được cập nhật đúng cách, nhưng đầu vào sẽ mất tiêu điểm. Bất kỳ ý tưởng làm thế nào điều này có thể được cố định?

Answer 1

Từ google forums:

Vấn đề là với tất cả các thay đổi mô hình đối tượng các ng-repeat tái sinh toàn bộ mảng và do đó làm mờ hộp đầu vào của bạn. Những gì bạn cần làm là quấn dây của bạn trong các đối tượng

Answer 2

Tôi muốn có một cách để trì hoãn việc tái sinh cho đến khi tôi đang thực hiện chỉnh sửa.

Bạn có thể làm điều đó. Chỉ cần thực hiện một chỉ thị tùy chỉnh để loại bỏ các sự kiện AngularJS và lắng nghe "thay đổi" thay thế. Dưới đây là một ví dụ về những gì mà chỉ tùy chỉnh có thể trông giống như:

YourModule.directive('updateModelOnBlur', function() { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function(scope, elm, attr, ngModelCtrl) 
    { 
     if(attr.type === 'radio' || attr.type === 'checkbox') 
     { 
     return; 
     } 

     // Update model on blur only 
     elm.unbind('input').unbind('keydown').unbind('change'); 
     var updateModel = function() 
     { 
     scope.$apply(function() 
     { 
      ngModelCtrl.$setViewValue(elm.val()); 
     }); 
     }; 
     elm.bind('blur', updateModel); 

     // Not a textarea 
     if(elm[0].nodeName.toLowerCase() !== 'textarea') 
     { 
     // Update model on ENTER 
     elm.bind('keydown', function(e) 
     { 
      e.which == 13 && updateModel(); 
     }); 
     } 
    } 
    }; 
}); 

Sau đó, trên đầu vào của bạn:

<input type="text" ng-model="foo" update-model-on-blur />