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