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

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 に答える