So löschen Sie dynamische ng-repeat-Formularfelder

Frage: Wie löschen Sie ein dynamisch erstelltes AngularJS-Formularfeld ng-repeat? Wenn du einen Ort finden kannst, an dem ich nicht nach der Antwort gesucht habe, wäre ich überrascht.So löschen Sie dynamische ng-repeat-Formularfelder

Hintergrund: Ich habe AngularJS JSON durch einen Service in meine Steuerung ziehen. Ich benutze dann Bereich, um Etiketten für ein Formular zu wiederholen. Ich habe Probleme, die Felder zu säubern. Da Wörter nicht genau sagen, was ich hier mache, ist die grundlegende Code-Einrichtung. Ich habe es auf ein paar Zeilen runtergehackt.

Ich habe die alten $scope.formName.inputName=""; und $scope.inputName=""; versucht, aber sie funktionieren nicht. Irgendwelche Ideen oder eine Richtung zu gehen?

http://plnkr.co/edit/BtID7a8EnyxuxClwdHkS?p=preview

<!DOCTYPE html> 
<html> 
<head> 
<script data-require="[email protected]*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> 
<link href="style.css" rel="stylesheet" /> 
<script src="app.js"></script> 
</head> 
<body ng-app="app" ng-controller="AppTest as app"> 
    <form name="formName" id="formName" style="width: 320px"> 
     <div ng-repeat="item in currentInfo.attribute"> 
      <div style="float:left;">{{item.desc}} </div> 
      <div style="float:left;"> 
       <input name="forminput" ng-model="forminput" style="width:200px" type="text" value=""/> 
      </div> 
     </div> 
     <button value="Clear" style="float:left;" ng-click="clearMe()">Clear</button> 
    </form> 
</body> 
</html> 

var app = angular.module("app", []); 
app.controller("AppTest", function($scope) { 
$scope.currentInfo = { 
"attribute": [ 
    { 
     "name": "ACCT", 
     "desc": "Account #", 
    }, 
    { 
     "name": "FNAME", 
     "desc": "First Name", 
     "type": "VARCHAR", 
     "validation": "^[a-zA-Z\\s]+" 
    }, 
    { 
     "name": "LNAME", 
     "desc": "Last Name", 
     "type": "VARCHAR", 
     "validation": "^[a-zA-Z\\s]+" 
    }, 
    { 
     "name": "MNAME", 
     "desc": "Middle Name", 
     "type": "CHAR", 
     "validation": "^[a-zA-Z]+[1-9]+" 
    } 
] 
}; 
$scope.clearMe = function(){ 
    $scope.forminput = ""; 
}; 
});

Quelle

2015-04-15 bluevman

Du indem forinput ein Objekt eine einzige ngmodel="forminput" Verwendung einzigartig für jede Wiederholung und schaffen einzigartige Modelle mit Tasten ng-model="forminput[item.desc]"

zuerst in Ihrem Controller

$scope.forminput = {};

dann In Sicht ändern Sie den Eingang als

Demo:

// Code goes here 
 

 
var app = angular.module("app", []); 
 

 
app.controller("AppTest", function($scope) { 
 
    $scope.forminput = {}; 
 
    $scope.currentInfo = { 
 
    "attribute": [ 
 
     { 
 
      "name": "ACCT", 
 
      "desc": "Account #", 
 
     }, 
 
     { 
 
      "name": "FNAME", 
 
      "desc": "First Name", 
 
      "type": "VARCHAR", 
 
      "validation": "^[a-zA-Z\\s]+" 
 
     }, 
 
     { 
 
      "name": "LNAME", 
 
      "desc": "Last Name", 
 
      "type": "VARCHAR", 
 
      "validation": "^[a-zA-Z\\s]+" 
 
     }, 
 
     { 
 
      "name": "MNAME", 
 
      "desc": "Middle Name", 
 
      "type": "CHAR", 
 
      "validation": "^[a-zA-Z]+[1-9]+" 
 
     } 
 
    ] 
 
    }; 
 
    $scope.clearMe = function(){ 
 
    console.log("herleme") 
 
    $scope.forminput = {}; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="app" ng-controller="AppTest as app"> 
 
    <h1>Hello Plunker!</h1> 
 
    <form name="formName" id="formName"> 
 
     <div ng-repeat="item in currentInfo.attribute"> 
 
      <div style="float:left;">{{item.desc}} </div> 
 
\t \t \t \t <div > <input name="forminput[item.desc]" ng-model="forminput[item.desc]" style="width:200px" type="text" value=""/> 
 
     </div> 
 
     </div> 
 
     <button value="Clear" ng-click="clearMe()">Clear</button> 
 
    </form> 
 
     
 
    </body>

<input name="forminput[item.desc]" 
ng-model="forminput[item.desc]" 
style="width:200px" type="text" value=""/>

und als

$scope.clearMe = function(){ 
    console.log("herleme") 
    $scope.forminput = {}; 
    };

Quelle

2015-04-15 19:15:12

A.B: Ich kann dies als eine sehr eckige Art und Weise, es zu tun, anstatt durch das Objekt rekursiv nur das Objekt zurück auf leer zu sehen. Vielen Dank! – bluevman

@bluevman gald es half Ihnen, akzeptieren Sie es als eine so, damit es Mütter auch helfen kann :) –

Wenn ich verstehe, Löschen Sie alle Felder im Formular löschen wollen, dass die auf dem Klicken auf ' löschen 'Knopf?

Hier ist eine Arbeitsversion:

http://plnkr.co/edit/f0QSDKH7qkM8CcZRU5Js?p=preview

var app = angular.module("app", []); 

app.controller("AppTest", function($scope) { 
    $scope.currentInfo = { 
    "attribute": [ 
     { 
      "name": "ACCT", 
      "desc": "Account #", 
     }, 
     { 
      "name": "FNAME", 
      "desc": "First Name", 
      "type": "VARCHAR", 
      "validation": "^[a-zA-Z\\s]+" 
     }, 
     { 
      "name": "LNAME", 
      "desc": "Last Name", 
      "type": "VARCHAR", 
      "validation": "^[a-zA-Z\\s]+" 
     }, 
     { 
      "name": "MNAME", 
      "desc": "Middle Name", 
      "type": "CHAR", 
      "validation": "^[a-zA-Z]+[1-9]+" 
     } 
    ] 
    }; 
    $scope.clearMe = function(){ 
    for(var i = 0; i < $scope.currentInfo.attribute.length; i++) { 
     $scope.currentInfo.attribute[i].forminput = ''; 
    } 
    }; 
}); 

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> 
    <link href="style.css" rel="stylesheet" /> 
    <script src="app.js"></script> 
    </head> 

    <body ng-app="app" ng-controller="AppTest as app"> 
    <h1>Hello Plunker!</h1> 
    <form name="formName" id="formName"> 
     <div ng-repeat="item in currentInfo.attribute"> 
      <div style="float:left;">{{item.desc}} </div> 
       <div style="float:left;"> <input name="forminput" ng-model="item.forminput" style="width:200px" type="text" value=""/> 
     </div> 
     </div> 
     <button value="Clear" ng-click="clearMe()">Clear</button> 
    </form> 

    </body> 

</html>

ich das Modell Current verwendet habe sich der Wert der Eingänge zu binden. Dies bedeutet, dass sie außerhalb des Umfangs der ng-Wiederholung verfügbar sind. Dann durchläuft die Clear-Funktion jedes Element im Array 'attributes' und setzt den Wert auf eine leere Zeichenfolge.

Quelle

2015-04-15 19:17:06 rom99

rom99 Vielen Dank! Ich starrte diesen Code so lange an, dass ich nicht einmal an die Antwort denken konnte. – bluevman

Sie waren auf dem richtigen Weg, aber mit leichten Bug. Alle generierten Formulare wurden an dasselbe Modell - Forminput - gebunden. Sie müssen die Modellbindung dynamisch generieren.

<input name="forminput" ng-model="formmodel[item.name]"/>

und in der Steuerung

$scope.formmodel = {};

Check-out der plunkr

Überprüfen Sie auch für die generierten Formulare aus Projekten wie autofields, keine Notwendigkeit, das Rad neu zu erfinden.

Quelle

2015-04-15 19:22:24

So löschen Sie dynamische ng-repeat-Formularfelder

Antwort

Verwandte Themen