Come deselezionare i campi modulo din ng-repeat

Domanda: Come si deseleziona un campo modulo creato dinamicamente ng-repeat AngularJS? Se riesci a trovare un posto dove non ho cercato la risposta, sarei sorpreso.Come deselezionare i campi modulo din ng-repeat

Background: Ho AngularJS che preleva JSON attraverso un servizio nel mio controller. Quindi utilizzo scope per ng-repeat label per un modulo. Ho problemi a pulire i campi. Dato che le parole non ti dicono esattamente quello che sto facendo qui è la configurazione di base del codice. L'ho hackerato su poche righe.

Ho provato il vecchio $scope.formName.inputName=""; e $scope.inputName="";, ma non funzionano. Qualche idea o una direzione da seguire?

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

fonte

2015-04-15 bluevman

state ripetendo un singolo ngmodel="forminput" uso unico per ogni facendo forinput un oggetto e la creazione di modelli unici con le chiavi ng-model="forminput[item.desc]"

primo nel vostro controller

$scope.forminput = {};

poi in vista, modificare l'input come

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

e di compensazione come

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

fonte

2015-04-15 19:15:12

A.B: Posso vedere questo come un modo molto angolare di farlo invece di ricorrere attraverso l'oggetto, basta riportare l'oggetto a vuoto. Grazie! – bluevman

@bluevman gald ti ha aiutato, accettalo come un aswer in modo che possa aiutare le mamme pure :) –

Se ho ben capito, si desidera cancellare tutti i campi di modulo cliccando sul ' cancella il pulsante?

Ecco una versione funzionante:

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>

Ho usato il modello currentInfo stesso per associare il valore degli ingressi. Ciò significa che saranno disponibili al di fuori dell'ambito della ng-repeat. Quindi la funzione di clear esegue iterazioni su ogni elemento dell'array 'attributes' e imposta il valore sulla stringa vuota.

fonte

2015-04-15 19:17:06 rom99

rom99 Grazie mille! Avevo fissato così a lungo questo codice che non riuscivo nemmeno a pensare alla risposta. – bluevman

Eri sulla strada giusta, ma con un bug leggero. Tutte le forme generate erano legate allo stesso modello: forminput. Devi generare l'associazione del modello in modo dinamico.

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

e nel controllore

$scope.formmodel = {};

check out il plunkr

Inoltre, per le forme generate dai un'occhiata progetti autofields, c'è bisogno di reinventare la ruota.

fonte

2015-04-15 19:22:24

Come deselezionare i campi modulo din ng-repeat

risposta

Problemi correlati