Angular Get Form Elements

I am trying to get element name and class from a form that is passed on to a function. How can i do that? Html side.

Solution 1:

You can access the form directly from $scope using its name, i.e. $scope.test, and the elements from the form, e.g. $scope.test.test2.

However, if you want to loop through the elements without having to know their individual names you can do something like:

angular.forEach($scope.test, function (element, name) {
    if (!name.startsWith('$')) {
        // element is a form element!
    }
});

Solution 2:

I'm relatively new to AngularJS, but I am going to make a solid attempt to answer to test my knowledge and hopefully help you.

So in your form, on each of your elements you should use a ng-model. For example, here is a form that may collect a users first and last name:

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

This will allow you to access the data in your form through $scope.user.

Now for changing classes and attributes, I'm not sure what rules dictate a class/attribute change on your form, but you could use the ng-dirty class as a "flag" to watch for when the user makes a change. Some more information here as to what exactly you are trying to accomplish would be helpful.

Solution 3:

A common piece of advice I've seen for angular.js is that, you should only do DOM manipulation in directives, so you should definitely consider doing it according to Anthony's answer, that is, using ng-model.

Go down below to see a way to do it more properly using directives.

But if you insist on doing it in the controller, here is a jsfidle that shows you how you can approach it:

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

HTML:

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

JavaScript:

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

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

And here is the jsfiddle showing you how to do it with directives. It's a bit more complicated though...:

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

Solution 4:

I am trying to get element name and class from a form that is passed on to a function. How can i do that?

Your pseudocode is on the right track:

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

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

        // "fieldName" contains the name of the field// Get the valuevar fieldValue = field.$viewValue;
    } );
}

My purpose is to change class and some other attributes when it's necessary.

To do that, you can get the field elements, with the Angular element wrapper:

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

You can then use various jqLite methods on these elements. For instance, to set the element's class (overwriting the existing class), you can use the attr method:

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

Share