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