AngularJS dynamische Form Inhalt

Hier ist meine Winkelansicht,AngularJS dynamische Form Inhalt

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

die i addSkipColumn Schaltfläche klicken jedes Mal neues Textfeld erstellt.

hier mein js-Code ist:

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

    }

so das Problem ist, wenn ich die Struktur von $ scope.config.skipColumns anzuzeigen oder sehen, es gibt die folgende Ausgabe:

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

}

Aber was ich brauche ist, `

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

}

mir bitte helfen. ("Inhalt von Textfeld" resfers Daten zu bilden)

Quelle

2017-04-07 swaroop sg

Was Sie hier brauchen, ist zu ändern, was Sie in config.skipColumns Array drängen. Wie folgt aus:

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

Und ng-repeat wäre wie:

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

Hier funktioniert Beispiel:

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>

Quelle

2017-04-07 05:27:05 tanmay

wunderbar. Vielen Dank Tanmay. –

Sehen Sie dies ... Drücken Sie einfach Wert statt Array.

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>

Quelle

2017-04-07 05:26:56 Jenny

Vielen Dank für die Antwort. –

AngularJS dynamische Form Inhalt

Antwort

Verwandte Themen