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>
但在这种情况下，该方法不会被触发。
问题答案：
编辑
这是一个基于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）”标题下。
-
问题内容： 我正在尝试将a的值存储到我的JS代码中。但是我找不到在这种情况下为什么不起作用的原因。 有解决方法吗？ 参见： JSFiddle 注意： 我正在创建一个文本编辑器，因此当用户将HTML存储在其后时，用户应该看到结果。（即，用户在存储以下内容时看到：“这是一个 示例 ！”） 问题答案： contenteditable标签不能直接与angular的ng模型一起使用，因为contentedi
-
问题内容： 我正在与AngularJS一起显示应用程序键（应用程序标识符）表，我想使用编辑按钮在该表行中显示一个小表格。然后用户可以编辑字段并单击“保存”或“取消” 演示：http：//jsfiddle.net/Thw8n/ 我的内联表单效果很好。我单击编辑，然后出现一个表格。取消也很棒。 我的问题是 如何连接保存按钮和将对API进行$ http调用的函数 如何从该行获取数据以发送到$ http调
-
问题内容： 使用什么是能够编辑内容的最佳方法？ 在我理想的情况下， 添加的 生日将是一个超链接，点击该链接将显示一个编辑表单-与带有更新按钮的当前添加表单相同。 实时预览（插播） HTML： App.js： 问题答案： 您应该将表单放在每个节点内，分别使用和启用和禁用编辑。像这样： 这里的关键点是： 我已将控件更改为本地范围 已添加到，因此我们可以在编辑时显示它 添加了带有的，以便在编辑时隐藏内容
-
问题内容： 给一个非常基础的类（将导入解析为javafx包）： 某些字段表示在.fxml文件中定义的控件： 以及最基本使用属性包装器的数据模型： 我尝试将ui控件与Initialize中的数据模型绑定： 但是这样做， 我得到了不可编辑的控件 。注释掉Bindings.bindBidirectional行后，该控件通常可以编辑，并且可以通过text01字段访问其值。 此装订单中缺少的成分是什么？ 问
-
Mpx针对表单组件提供了wx:model双向绑定指令，类似于v-model，该指令是一个语法糖指令，监听了组件抛出的输入事件并对绑定的数据进行更新，默认情况下会监听表单组件的input事件，并将event.detail.value中的数据更新到组件的value属性上。 简单实用示例如下： <view> <input type="text" wx:model="{{message}}"> <
-
双向绑定这个概念在angular出现的时候,就作为王牌概念. 现在几乎是个js前端框架,就有这个功能. 它的概念是: 某个变量, 如果展现在页面上的话: 如果在代码层面进行修改, 那么页面的值就会发生变化 如果在页面进行修改(例如在input标签中), 那么代码的值就会发生变化. 一个演示例子. 在我们的项目中,增加一个 vue页面: src/components/TwoWayBinding.vu