4

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

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

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

4

4 回答 4

4

您可以直接通过$scope使用它name的 ie$scope.test和表单中的元素来访问表单,例如$scope.test.test2

但是,如果您想遍历元素而不必知道它们各自的名称,您可以执行以下操作:

angular.forEach($scope.test, function (element, name) {
    if (!name.startsWith('$')) {
        // element is a form element!
    }
});
于 2016-03-17T23:54:36.730 回答
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/

于 2013-07-09T15:34:22.547 回答
3

我对 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 类作为“标志”来观察用户何时进行更改。此处有关您要完成的工作的更多信息会有所帮助。

于 2013-07-09T12:57:12.790 回答
3

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

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

$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 + '"]' ) );

然后,您可以对这些元素使用各种jqLit​​e方法。例如,要设置元素的类(覆盖现有类),可以使用attr方法:

// Replace existing class with "new-class"
fieldElement.attr( 'class', 'new-class' );
于 2016-04-21T18:15:52.193 回答