Question

我正在使用角度js版本1.2。

基本上我是基于屏幕在服务器中创建对象来执行此操作我需要传递给服务器

如何使用angularjs将'div'onload of screen转换为json？

html看起来像这样：

<div id="settingsholder"  ng-controller="MyCtrl">
  <input ng-model="user.firstName" />
  <input ng-model="user.lastName" />
  <input type="button" ng-click="showJson()" value="Object To JSON" />
    <hr/>  
    {{user | json}}
</div>

js：

    function MyCtrl($scope) {
        $scope.user = { };
    }

jsfiddele：http://jsfiddle.net/bpbhat777/2grw1je0/

我希望它是这样的 http://jsfiddle.net/bpbhat777/dbg2u5ck/

没有设置firstname和lastName。它不需要是firstname和lastName，在屏幕上ng-model可能是任何对象

Answer 1

<div id="settingsholder"  ng-controller="MyCtrl">
  <input ng-model="user.firstName" ng-init="user.firstName=''" />
  <input ng-model="user.lastName" ng-init="user.lastName=''" />
  <input type="button" ng-click="showJson()" value="Object To JSON" />
    <hr/>  
    {{user | json}}
</div>

并从控制器中删除$scope.user = { };

没有ng-init

 <div id="settingsholder"  ng-controller="MyCtrl">
      <input ng-model="user.firstName"  />
      <input ng-model="user.lastName"/>
      <input type="button" ng-click="showJson()" value="Object To JSON" />
        <hr/>  
        {{user | json}}
 </div>

 function MyCtrl($scope) {
     $scope.user = {firstName:'',lastName:''};
 }

Answer 2

您正在寻找angular.toJson()

https://docs.angularjs.org/api/ng/function/angular.toJson

有几种方法可以在页面加载时更新$ scope。我个人更喜欢使用init()：

$scope.init = function() {
    $scope.json = angular.toJson($scope.user);
}

$scope.init();

小提琴：http://jsfiddle.net/dbg2u5ck/2/

在阅读并重新阅读您的问题后，在我看来，您希望使用预先加载的html值填充$scope（在您的情况下为空字符串）。这不是Angular的工作方式，如果您想使用html值填充$scope，请花时间阅读本文：Angular js init ng-model from default values

Answer 3

我不知道它的用途是什么。但如果你真的需要ng-init可能是选项

<div id="settingsholder" ng-controller="MyCtrl">
    <input ng-model="user.firstName" ng-init="user.firstName=''" />
    <input ng-model="user.lastName" ng-init="user.lastName=''" />
    <input type="button" ng-click="showJson()" value="Object To JSON" />
    <hr/>{{user | json}}

检查demo fiddle

如何在负载角度序列化div？

3 个答案: