angularjs创建动态表单元素答案

【问题标题】：angularjs creating dynamic form elementsangularjs创建动态表单元素
【发布时间】：2017-03-01 04:21:46
【问题描述】：

我的 html 元素是这样的：

<body ng-controller="addController">
<div class="col-sm-10">

    <label class="control-label">tableName:</label> 
    <fieldset ng-repeat="tableName in tableNames">

        <input type="text" class="form-control" ng-model="tableName.tableName" /><br />
    </fieldset>
    <button class="btn btn-default" ng-click="addNewTable()">Add tablename</button>
    <input type="submit" ng-click="add()" />    
</div>
<div>
   <pre>{{tableNames|json}}</pre> 
</div>
</body>

每次单击按钮时，此代码都会生成一个文本框。

js:

function addController($scope, $http) {

        $scope.tableNames = [];
        $scope.addNewTable = function (tableName) {
            $scope.tableNames.push({});

        }
}

当我显示 tableNames 它给了我：

[{"tableName":"textboxvalue"},{"tableName":"textboxvalue"}];

但我打算得到以下输出：

[{"tableName1":"textboxvalue","tableName2":"textboxvalue","tableName3":"textboxvalue"}];

为了获得所需的输出，我应该对设计进行哪些更改。提前致谢。

【问题讨论】：

尝试为输入元素设置ng-model="tableName['tableName' + ($index + 1)]"

标签： javascript angularjs object

【解决方案1】：

您每次都将对象推送到数组中，但您想要的是在数组中的对象中添加键值对。试试这个

 $scope.tableNames = [{}];
    $scope.addNewTable = function (tableName) {
        $scope.tableNames[0].tableName = "textboxvalue" ;

    }

【讨论】：