gpt4 book ai didi

angularjs - ng-list 中 contenteditable 项的两种方式绑定(bind)

转载 作者:行者123 更新时间:2023-12-04 00:42:30 24 4
gpt4 key购买 nike

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

原来的

这里有一个例子来说明你如何做到这一点: http://docs.angularjs.org/guide/forms

它位于“实现自定义表单控件(使用 ngModel)”标题下。

关于angularjs - ng-list 中 contenteditable 项的两种方式绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15108602/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com