Question

我正在尝试将模型从对象的JSON表示更新为表单。这是一个link to an example

要重新创建我的问题，

更改表单中的数据（请参阅JSON更改）。
更改JSON（请参阅表单不会更改）。

这是我的代码：

JS

var ppl = {
  createdby: "foo",
  dateCreated: "bar",
}
angular.module('myApp', [])
.controller("Ctrl_List", function($scope) {
  $scope.people = ppl
  $scope.print = JSON.stringify($scope.ppl)
})

HTML

<div ng-app="myApp">
  <div class="container" ng-controller="Ctrl_List">

    <!-- FORM -->
    <div class="row" ng-repeat="(key,val) in people track by $index">
      <div class="col-md-12">
        <label for="{{key}}">{{key}}</label>
        <input class=form-control" id="{{key}}" ng-model="people[key]">
      </div>
    </div>

    <!-- JSON -->
    <div class="editable" contenteditable="true" ng-model="people">{{people}}</div>

  </div>
</div>

当用户更改JSON时，表单应实时更新。

以下是我尝试过的一些事情：

将JSON显示元素从div更改为input，但会打印[Object][Object]
同样<input ng-model="JSON.stringify(people)">但我收到了“不可绑定的元素”错误。
还尝试添加新模型：$scope.print = JSON.stringify(people)但它在原始输出中没有显示任何内容。

甚至可以更新实时对象，还是我必须做某种触发表单更改的事件？

PS：Angular 1.5.8

Answer 1

参考Contenteditable with ng-model doesn't work，

contenteditable标签不能直接使用angular的ng-model，因为contenteditable的方式会在每次更改时重新呈现dom元素。

Answer 2

为什么这不起作用有几个原因：

ng-model on div没有做任何事情
即使这样做，它也会将字符串保存到people，因此您的表单将不再有效。

您应该使用textarea使其工作，并将其绑定到另一个string类型的变量。在textarea和表单的输入上使用ng-change，允许通过解析JSON字符串来填充people对象，反之，从people对象填充JSON字符串。 / p>

请参阅https://codepen.io/anon/pen/peexPG了解演示。

Answer 3

试试这个

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title></title>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script type="text/javascript">
       var ppl = {
          createdby: "foo",
          dateCreated: "bar",
      }
      var app = angular.module('app',[]);
      app.controller('myCtrl',function myCtrl($scope){

          $scope.people = ppl
          $scope.print = JSON.stringify($scope.ppl)
      })


  </script>


</head>
<body>
    <div class="container" ng-controller="myCtrl">

        <!-- FORM -->
        <div class="row" ng-repeat="(key,val) in people track by $index">
          <div class="col-md-12">
            <label for="{{key}}">{{key}}</label>
            <input class=form-control" id="{{key}}" ng-model="people[key]">
        </div>
    </div>

    <!-- JSON -->
    
    <div class="editable" contenteditable="true" ng-model="people">{{people}}</div>

</div>

</body>
</html>

将原始对象输出绑定到表单表示

3 个答案: