里面NG-CONTENTEDITABLE列表项的双向绑定 [英] Two way binding of contenteditable item inside ng-list
问题描述
我期待在使用contenteditable属性，手机列表更新手机名称。我一直在使用NG-变化试过但那不是被解雇。有没有什么办法可以做到这一点？
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?
我 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>
此外
<strong ng-model='PhoneName' ng-change='PhoneNameChanged()'> {{Phone.Name}}</strong>
但在这种情况下，该方法不被解雇。
but in this case the method is not getting fired.
推荐答案
的修改的
下面是根据刚刚使用角文档 NG-重复的例子为例。由于 NG-重复创建每个迭代一个新的范围，它不应该是一个问题。
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>
的原始的
有是你如何能做到这一点这里一个例子： http://docs.angularjs.org/guide/forms
There's an example of how you can do just that here: http://docs.angularjs.org/guide/forms
这是在实现自定义表单控件（使用ngModel）标题。
It's under the "Implementing custom form controls (using ngModel)" header.
这篇关于里面NG-CONTENTEDITABLE列表项的双向绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
