ng-list中的contenteditable項目的雙向綁定
[英]Two way binding of contenteditable item inside ng-list
問題描述
我希望使用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>
但在這種情況下，該方法不會被解雇。
2 個解決方案
解決方案1
16 已采納 2013-02-27 09:40:06
編輯
這是一個基於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）”標題下。
解決方案2
4 2013-05-27 09:41:38
只需刪除ctrl.$setViewValue(elm.html());
如何在Angular js中使用ng-bind-html實現對contenteditable元素的雙向綁定？
[英]How do I achieve two way binding for a contenteditable element using ng-bind-html in Angular js?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.