Question

这是我的角度视图，

<label class="control-label">skipColumns:</label>
  <br />
<fieldset ng-repeat="skipColumn in config.skipColumns track by $index">
<input type="text" class="form-control" ng-model="skipColumn[0]" /><br />
</fieldset>
<button class="btn btn-default" ng-click="addNewSkipColumn(skipColumn)">Add SkipColumn</button>
<br />

每次单击addSkipColumn按钮时都会添加新的文本字段。

这是我的js代码：

$scope.config.skipColumns = [];
    $scope.addNewSkipColumn = function (skipColumn) {
        if($scope.config.skipColumns==null){
            $scope.config.skipColumns=[];
        }
        $scope.config.skipColumns.push([]);

    }

所以问题是当我显示或看到$ scope.config.skipColumns的结构时，它给出了以下输出：

{
 skipColumns:[["content of textfield1"],["content of textfield1"]..]

 }

但我需要的是，`

{
 skipColumns:["content of textfield1","content of textfield1",..]

 }

请帮帮我。（“textfield的内容”是指表格数据）

Answer 1

这里需要的是改变你在config.skipColumns数组中推送的内容。像这样：

$scope.addNewSkipColumn = function(skipColumn) {
    $scope.config.skipColumns.push("");
}

而且，ng-repeat就像：

<fieldset ng-repeat="skipColumn in config.skipColumns track by $index">
    <input type="text" ng-model="config.skipColumns[$index]" />
</fieldset>

（why did I not use skipColumn directly in the ng-model?）

以下是工作示例：

＆＃13;

angular.module("myApp", [])
  .controller("ctrl", function($scope) {
    $scope.config = {};

    $scope.config.skipColumns = [];
    $scope.addNewSkipColumn = function(skipColumn) {
      $scope.config.skipColumns.push("");
    }
  })

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="myApp" ng-controller="ctrl">
  <label class="control-label">skipColumns:</label>
  <br />
  <fieldset ng-repeat="skipColumn in config.skipColumns track by $index">
    <input type="text" class="form-control" ng-model="config.skipColumns[$index]" />
  </fieldset>
  <button class="btn btn-default" ng-click="addNewSkipColumn()">Add SkipColumn</button>
  <br />
  <br>
  <pre>{{config.skipColumns}}</pre>
</body>

</html>

＆＃13;

Answer 2

看到这个......只需推送值而不是数组。

＆＃13;

var app = angular.module('angularjs', []);

  app.controller('MainCtrl', function($scope) {

  $scope.choices = ['choice1'];
  
  $scope.addNewChoice = function() {
    var newItemNo = $scope.choices.length+1;
    $scope.choices.push('choice'+newItemNo);
  };
    
  $scope.removeChoice = function() {
    var lastItem = $scope.choices.length-1;
    $scope.choices.splice(lastItem);
  };
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div ng-app="angularjs" ng-controller="MainCtrl">
   <fieldset  data-ng-repeat="choice in choices">
      <select>
         <option>Mobile</option>
         <option>Office</option>
         <option>Home</option>
      </select>
      <input type="text" ng-model="choice.name" name="" placeholder="Enter mobile number">
      <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
   </fieldset>
   <button class="addfields" ng-click="addNewChoice()">Add fields</button>
       
   <div id="choicesDisplay">
      {{ choices }}
   </div>
</div>

＆＃13;

Angularjs动态表单内容

2 个答案: