Angulaire d'obtenir des éléments de formulaire

Je suis en train d'essayer d'obtenir le nom de l'élément et de la classe à partir d'un formulaire qui est transmis à une fonction. Comment puis-je le faire?

Html côté.

   <form name="test">
    <div>
         <input type="text" class="test1" name="test2"/>
    </div>
    <div>
         <input type="text" class="test3" name="test4"/>
    </div>
    </form>
    <div>
         <input type="button" data-ng-click="save(test)" />
    </div>

et Javascript côté

$scope.save = function(form){
   for(how many elements are there)
       (get elements values)
}

comment je peux faire cela, peut-il même possible de le faire comme ça? Mon but est de changer de classe et d'autres attributs, lorsque c'est nécessaire.

Voir ce post

OriginalL'auteur Kapaacius | 2013-07-09

  1. 3

    Je suis relativement nouveau à AngularJS, mais je vais faire un solide tenter de répondre à mes connaissances à l'épreuve et nous espérons vous aider.

    Dans votre formulaire, sur chacun de vos éléments, vous devriez utiliser un ng-model. Par exemple, voici un formulaire qui peut collecter de l'utilisateur nom et prénom:

     <form name="test">
<div>
     <input type="text" class="test1" name="test2" data-ng-model="user.name/>
</div>
<div>
     <input type="text" class="test3" name="test4" data-ng-model="user.last/>
</div>
</form>
<div>
     <input type="button" data-ng-click="save(test)" />
</div>

    Ce qui vous permettra d'accéder aux données de votre formulaire par le biais de $champ d'application.de l'utilisateur.

    Maintenant pour le changement de classes et d'attributs, je ne suis pas sûr de ce que les règles exigent une classe/la modification de l'attribut sur votre formulaire, mais vous pouvez utiliser la ng-sale de classe comme un "drapeau" à surveiller lorsque l'utilisateur effectue un changement. Plus d'information ici sur ce qu'est exactement que vous essayez d'accomplir serait utile.

    J'ai besoin de changer de classe les champs à afficher une erreur, j'espère que je peux boucle à travers les champs de saisie après avoir enregistrer bouton est pressé et d'afficher tous les champs non valides. Pour le moment j'ai utilisé SI la pour le faire, mais je voudrais le faire par le biais de la boucle.
    Il semble que vous êtes en train de faire de la validation du formulaire, qui Angulaire a construit en: docs.angularjs.org/guide/forms. C'est un peu compliqué, mais tous les éléments sont là.

    OriginalL'auteur Anthony

  2. 3

    Vous pouvez accéder au formulaire directement à partir de $scope à l'aide de son name, c'est à dire $scope.test, et les éléments de la forme, par exemple,$scope.test.test2.

    Cependant, si vous souhaitez faire une boucle à travers les éléments sans avoir à connaître leurs noms vous pouvez faire quelque chose comme:

    angular.forEach($scope.test, function (element, name) {
    if (!name.startsWith('$')) {
        //element is a form element!
    }
});
    if (!name.startsWith('$') { devrait lire if (!name.startsWith('$')) { (manque ) de fermer la condition).
    Mis à jour il. Merci.

    OriginalL'auteur Mark Rhodes

  3. 2

    Une pièce commune de conseils que j'ai vu pour angular.js est que, vous ne devriez faire de manipulation du DOM dans les directives, donc vous devriez certainement envisager de le faire selon Anthony réponse, qui est, à l'aide de ng-model.

    Aller vers le bas ci-dessous pour voir un moyen de le faire plus correctement à l'aide de directives.

    Mais si vous insistez à faire dans le contrôleur, voici une jsfidle qui vous montre comment vous pouvez l'approcher:

    http://jsfiddle.net/3BBbc/2/

    HTML:

    <body ng-app="myApp">
    <div ng-controller="MyCtrl">
        <form id="test">
            <div>
                <input type="text" class="test1" name="test2" />
            </div>
            <div>
                <input type="text" class="test3" name="test4" />
            </div>
        </form>
        <div>
            <input type="button" ng-click="save('test')" value="submit" />
        </div>
    </div>
</body>

    JavaScript:

    var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.save = function (formId) {
        $('#' + formId).find('input').each(function (idx, input) {
            //Do your DOM manipulation here
            console.log($(input).val());
        });
    };
}

    Et voici le jsfiddle vous montrer comment le faire avec les directives. C'est un peu plus compliqué...:

    http://jsfiddle.net/3BBbc/5/

    Vous pouvez toujours allez simplement à travers les portée.<form_name> champs de comprendre les champs de saisie.

    OriginalL'auteur yanhan

  4. 2

    Je suis en train d'essayer d'obtenir le nom de l'élément et de la classe à partir d'un formulaire qui est transmis à une fonction. Comment puis-je le faire?

    Votre pseudo-code est sur la bonne voie:

    $scope.save = function( formName ) {
    angular.forEach( $scope[ formName ], function( field, fieldName ) {

        //Ignore Angular properties; we only want form fields
        if( fieldName[ 0 ] === '$' ) {
            return;
        }

        //"fieldName" contains the name of the field

        //Get the value
        var fieldValue = field.$viewValue;
    } );
}

    Mon but est de changer de classe et d'autres attributs, lorsque c'est nécessaire.

    Pour ce faire, vous pouvez obtenir les éléments de champ, avec l'Angulaire de l'élément de wrapper:

    //Get the field element, as an Angular element
var fieldElement = angular.element( document.querySelector( '[name="' + fieldName + '"]' ) );

    Vous pouvez ensuite utiliser les différents jqLite méthodes sur ces éléments. Par exemple, pour définir l'élément de la classe (en écrasant la classe), vous pouvez utiliser le attr méthode:

    //Replace existing class with "new-class"
fieldElement.attr( 'class', 'new-class' );

    OriginalL'auteur Lucas Castro