ng-repeat中的ContentEditable ng-model无法正常工作

时间:2016-02-23 06:12:19

标签: angularjs html5

我有简单的代码,用户可以编辑满足的数据。为此我从https://github.com/akatov/angular-contenteditable使用了contenteditable。 在ng-repeat中,ng-model绑定过程不起作用。这是我的代码

 <div class="list card listinfo" ng-repeat="(key,dtls)  in ddetails.details">
   <h2 contenteditable="true" ng-model="dtls.title"></h2>
   <p contenteditable="true"  ng-model="dtls.subtitle"></p>
  </div>

我也尝试过这样的

   <div class="list card listinfo" ng-repeat="(key,dtls)  in ddetails.details">
      <h2 contenteditable="true" ng-model="ddetails.details[key].title"></h2>
      <p contenteditable="true"  ng-model="ddetails.details[key].subtitle"></p>
  </div>

但我无法获取数据。

我从firebase获取数据

$scope.ddetails = FBFactory.getDM($stateParams.ddata);

和控制台输出在下面,

$id: "darjeeling"
$priority: null
details: Object
-KAyw0psnsBBLtnHSeJj: Object
address: ",India"
email: "test@gmail.com"
phone: "+91-"
shortDesc: "Short Description"
subtitle: "Sub Title"
title: "Title"
website: "http://www.google.com"
__proto__: Object
-KB8E8bHM2enqA4VnZkX: Object
-KB8E57BeUsuNw1R4m9E: Object
-KB8E60Pnm1sFCPaFL7I: Object
-KBBUfmzn7Ym6p0O7oQH: Object
-KBBUrCgoBKqKsXB_C4H: Object
__proto__: Object
shortDesc: "work test fdsfds"
title: "Dazzling Dfdfeling"

2 个答案:

答案 0 :(得分:0)

做一些事(比如它真正命名的ddetails?):

<div class="list card listinfo" ng-repeat="detail in ddetails.details">
      <h2 contenteditable="true" ng-model="detail.title"></h2>
      <p contenteditable="true"  ng-model="detail.subtitle"></p>
  </div>

每次重复整个对象,它应绑定到原始数​​组。

答案 1 :(得分:0)

根据Angular JS文档。 ng-model绑定表单元素检查此ng-model

ng-bind-html适用于任何html元素ng-bind-html