简体   繁体   English

angularjs创建动态表单元素

[英]angularjs creating dynamic form elements

I have my html elements like this: 我有这样的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>

This code generates a text box every time button is clicked. 每次单击按钮时,此代码都会生成一个文本框。

js: JS:

function addController($scope, $http) {

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

        }
}

When i display tableNames it gives me: 当我显示tableNames时,它给了我:

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

But what i intend is getting output of: 但是我打算得到的输出:

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

What should I have to change in design in order to get desired output. 为了获得所需的输出,我应该在设计上进行哪些更改。 Thanks in advance. 提前致谢。

You're pushing objects to the array each time but what you want is to add key value pair in the object in the array. 您每次都将对象推入数组,但是您想要在数组的对象中添加键值对。 try this 尝试这个

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

    }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM