Angularjs動態表單內容

這裏是我的斜視，Angularjs動態表單內容

<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的內容」是指表格數據）

來源

2017-04-07 swaroop sg

你所需要的就是改變你的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?）

這裏的工作示例：

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

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

<!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>

來源

2017-04-07 05:27:05 tanmay

太棒了。謝謝你，真是太棒了。 –

請參閱...只需按值而不是數組。

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); 
 
    }; 
 
    
 
});

<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>

來源

2017-04-07 05:26:56 Jenny

謝謝你的迴應。 –

Angularjs動態表單內容

回答

相關問題