18

フォームを有効にするためにラジオボタンを選択する必要がある非常に単純なフォームがあります。ラジオ ボタンは によって生成されngRepeatます。

このフィドルからわかるように、望ましい動作は、ラジオ ボタンが初めてクリックされたときにフォーム (唯一の要素) を検証することですが、(同じラジオ ボタンで) 追加のクリックが必要であることに注意してください。ボタンまたはその他) を使用してフォームを検証します。

http://jsfiddle.net/Xsk5X/3/

私は何が欠けていますか？

4

8 に答える 8

2

同僚が同じページのラジオ ボタンをコピーし、一時的な参照用に非表示にしたため、この問題が発生したため、同じ名前のラジオ入力が重複していました。

于 2014-11-04T15:19:20.323 に答える
1

AngularJS 1.0.3 $scope.$apply 更新の問題のようです。1.0.2 で正確な Fiddle をテストし (自分で確認してください)、期待どおりに動作します。

$scope.$apply(または $digest) が最初の選択で期待どおりに機能していないだけで、コードに問題があるようには見えません。

非常に簡単な修正方法は、選択ごとに $scope も強制的に更新することです。フォーム内の次のコード行を変更してみてください。

<p>Favorite Beatle</p>

それも変更してください：

<p>Favorite Beatle: {{name}}</p>

そして、最初のクリックの後でも myForm.$invalid がどのように更新されるかがわかります。

最新の AngularJs バージョンで試してみて、そこでも発生するかどうかをお知らせください。別の解決策として、デフォルトで選択されたラジオを設定すると、最初から myForm.$invalid が false になります。これを行うには、コントローラー コードに次の行を追加します。

$scope.name = "John";

または任意のデフォルト名。

于 2013-08-02T12:05:14.070 に答える
1

場合によっては、$digest サイクルが $apply(fn) にならないことがあります。これは、インスタンスが 2 つ以上あるためです。これを修正するには、このトリックを手動で $apply する必要があるため、これをディレクティブに入れます。

angular.('myApp',[])
.directive('ngRadioExtend', ['$rootScope', function($rootScope){
        return {
            require: 'ngModel',
            restrict: 'A',
            link: function(scope, iElm, iAttrs, controller) {
                iElm.bind('click', function(){
                    $rootScope.$$phase || $rootScope.$apply()
                });
            }
        };
    }])

そしてそれを次のように使用します：

<input type="radio" name="input_name" ng-model="some" value="F" ng-required="true" ng-radio-extend>

<input type="radio" name="input_name" ng-model="some" value="M" ng-required="true" ng-radio-extend>

それは正しい方法です！

于 2013-08-02T16:51:30.937 に答える
0

スコープが更新されない問題は、1.1.5 でも発生します。

簡単な回避策は、追加することです <span ng-show="false"> {{name}} </span>

フィドル: http://jsfiddle.net/jonyschak/xaQJH/

于 2013-08-13T22:19:00.093 に答える