Question

 var inputs={
    'firstname': '',
    'lastName':'',
   'account':{
     'role':'',
     'status':''
   }
 }

这是我的模型数组。我想在网页中动态显示它，并通过修改json数组，更改也应该影响表单。

这是图像

Answer 1

<强> UPD：根据您的情况，您可以使用ng-switch根据条件生成元素。

注意（已包含在代码段中）： ng-repeat将生成它自己的scope，因此除非您将模型与original scope绑定，否则您的模型不会更新。 ref here。

OLD ANSWER： 使用ng-model来实施two-way-databinding。请参阅下面的代码段：

＆＃13;

angular.module("app", []).controller("myCtrl", function($scope) {
  $scope.inputs = {
    'firstname': 'test first name',
    'lastName': 'test last name',
    'account': {
      'role': 'test role',
      'status': 'test status'
    }
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <!-- First Name: <input type="text" ng-model="inputs.firstname"><br>     
       Last Name: <input type="text" ng-model="inputs.lastName"><br>        Account Role: <input type="text" ng-model="inputs.account.role"><br> 
       Account Status: <input type="text" ng-model="inputs.account.status"><br> -->
  <div ng-repeat="(key1, value) in inputs" ng-switch="key1">
    <div ng-switch-when="account">
      <div ng-repeat="(key2, value2) in value">
        {{key1 | uppercase}} => {{ key2 | uppercase}}
        <input type="text" ng-model="inputs[key1][key2]">
      </div>
    </div>
    <div ng-switch-default>
      {{key1 | uppercase}}
      <input type="text" ng-model="inputs[key1]">
    </div>
  </div>
  {{inputs}}
</div>

＆＃13;

Answer 2

/ 我的HTML应该是这样的 /

  <head>
    <script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">


    <script type="text/ng-template" id="tree-structure">
    <label>{{dt}}</label><input type="text" name="" value="{{dt.label}}">
     <ul class="childElement">
        <li ng-repeat="dt in dt.nodes" ng-include="'tree-structure'">
        </li>
     </ul>
</script>

<ul class="parentList">
    <li ng-repeat="(key, value) in inputs" >
        <div  ng-repeat="(key1, value1) in value">
            <label>{{key1}}</label>
            <input type="text" name="" value="{{value1}}">

           <!--  <div ng-repeat="(key2, value2) in value1">
              <label>{{key2}}</label><input type="text" name="" value="{{value2}}"> 
            </div> -->

        </div>
        <div ></div>
    </li>

    </div>
</ul>
  </body>

</html>

Answer 3

一些观察结果：

您的JSON应使用该字段的type正确格式化。

如果您希望object properties作为form fields访问，那么它应该以良好的方式构建，以便我们也可以动态添加字段的类型。

[{
    name: 'firstName',
    type: 'text'
}, {
    name: 'lastname',
    type: 'text'
}, {
    account: [{
        name: 'role',
        type: 'text'
    }, {
        name: 'status',
        type: 'text'
    }]
}]

由于您JSON有nested objects。因此，首先以递归方式迭代它并创建one dimensional数组，然后使用1D数组创建字段。

<强>样本

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    var inputs = [{
	name: 'firstName',
	type: 'text'
}, {
	name: 'lastname',
	type: 'text'
}, {
	account: [{
		name: 'role',
		type: 'text'
	}, {
		name: 'status',
		type: 'text'
	}]
}];

$scope.fields = [];
function structuredObj(obj) {
  for (var i in obj) {
     if (obj[i].type == 'text') {
       $scope.fields.push(obj[i]);
     } else {
       structuredObj(obj[i])
     }
  }
};

structuredObj(inputs);

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="myForm" novalidate>
  <div ng-repeat="item in fields" class="form-group">
        <input
            name="item.name"
            type="{{ item.type }}"
            placeholder="{{ item.name }}"
            ng-model="item.value"
            required />
  </div>
<button ng-disabled="myForm.$invalid">Submit</button>
</form>
</div>

Answer 4

<div ng-repeat="(key1, value1) in myPersonObj">
    <div ng-repeat="(key, value) in value1">
        <label>{{key}}</label>
        <input type="text" name="" value="{{value}}">
    </div>
</div>

var app = angular.module("test",[]);

app.controller("MainCtrl",function($scope){

  $scope.inputs = [
    {
      "firstname" : "Test"
    },{
      "lastname" : "Test1"
    },{                           
      "Account" : [

        {"role" : "Test3"},
        {"status" : "Test4"},
      ]
    },
    {
      "Account1" : [

        {"role" : "Test3"},
        {"status" : "Test4"},
      ]
    },
    {
      "Account2" : [

        {"role" : {
          'dim3': {
            'dim4':{
              'dim5':'cccc'
            }
          }
        }

      },
        {"status" : "Test4"},
      ]
    }
  ];
$scope.person = [];
$scope.myPersonObj = [];
/*console.log($scope.keys(inputs));*/
    $scope.checkIndex1 = function(arg, myPersonObj)
    {
        if (angular.isArray(arg) || angular.isObject(arg)) {
            angular.forEach(arg, function (value, key) {
                console.log(value);
                if(angular.isObject(value) || angular.isArray(value))
                {
                    $scope.checkIndex1(value, myPersonObj);
                }
                else
                {
                    console.log("pushing");
                    myPersonObj.push(arg);
                }
            });
        }
        else
        {
            console.log("pushing1");
            myPersonObj.push(arg);
        }      
    }

    $scope.checkIndex1($scope.inputs, $scope.myPersonObj);

    console.log("myPersonObj :"+ JSON.stringify($scope.myPersonObj));

    console.log($scope.inputs);

在angulajs中从嵌套的json对象动态添加输入字段

4 个答案: