Question

我正在尝试从传递给函数的表单中获取元素名称和类。我怎么能这样做？

Html方面。

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

和Javascript方

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

我怎么能这样做，甚至可以这样做？我的目的是在必要时更改类和其他一些属性。

Answer 1

我对AngularJS比较陌生，但我会尽力回答测试我的知识并希望能帮到你。

因此，在您的表单中，您应该使用ng-model。例如，这是一个可以收集用户名和姓的表单：

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

这将允许您通过$ scope.user访问表单中的数据。

现在更改类和属性，我不确定哪些规则决定了表单上的类/属性更改，但是您可以使用ng-dirty类作为“标记”来监视用户何时进行更改。这里有一些关于你想要完成什么的更多信息会有所帮助。

Answer 2

您可以使用$scope name直接从$scope.test访问表单，即$scope.test.test2和表单中的元素，例如： angular.forEach($scope.test, function (element, name) { if (!name.startsWith('$')) { // element is a form element! } });。

但是，如果您想要遍历元素而不必知道他们的个人名称，您可以执行以下操作：

Answer 3

我在angular.js中看到的一条常见建议是，你应该只在指令中进行DOM操作，所以你应该根据Anthony的答案，即使用ng-model来做这件事。

在下面看一下使用指令更好地完成它的方法。

但如果你坚持在控制器中这样做，这里有一个jsfidle，告诉你如何接近它：

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());
        });
    };
}

这里是jsfiddle，向您展示如何使用指令。虽然......有点复杂：

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

Answer 4

我正在尝试从传递给函数的表单中获取元素名称和类。我怎么能这样做？

您的伪代码在正确的轨道上：

$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;
    } );
}

我的目的是在必要时更改课程和其他一些属性。

为此，您可以使用Angular元素包装器获取字段元素：

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

然后，您可以对这些元素使用各种jqLite方法。例如，要设置元素的类（覆盖现有类），可以使用 attr 方法：

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

Angular get form元素

4 个答案: