0

このアプリを検討してください ( http://jsfiddle.net/rQ9Za/ ):

<div ng-app>
    <input type="radio" name="data" ng-model="data.type" value="1"> Type 1<br>
    <input type="radio" name="data" ng-model="data.type" value="2"> Type 2<br>
    <input type="radio" name="data" ng-model="data" ng-value="null"> None<br>

    <div ng-show="data">        
        <input type="text" ng-model="data.nested1" /> 
        <input type="text" ng-model="data.nested2" />
    </div>
    <pre>{{ data }}</pre>
</div>

アプリがdataモデルを処理します。特に、それを無効にするか、ネイティブ js オブジェクトのネストされたプロパティのみを操作します。モデルのプロパティが設定されると、操作のために別の 2 つの兄弟値 (および)typeが明らかになります。モデル自体を無効化すると問題が発生します。この場合、ネストされた値も無効化されます。私はそれらを保存する必要があります。私が見たところ、これはバグでも何でもなく、ただの仕組みです。nested1nested2

無効化を超えて値を保持する方法についてのアイデアは大歓迎です。

興味深いことに、モデル自体ng-model="data"に ng 値{}を指定するラジオ オプションが 2 つしかない場合、nullそれはそのまま使用できます。期待される動作を示すフィドルは次のとおりです: http://jsfiddle.net/v3bgs/

4

1 に答える 1

1

「type1」と「type2」をオブジェクトに保存し、入力したものを消去せずにラジオ選択でアクセスできます。

このことを考慮 ：

<div ng-app ng-controller="MyCtrl">

    <input type="radio" name="data" ng-model="selection" value="type1"> Type 1<br>
    <input type="radio" name="data" ng-model="selection" value="type2"> Type 2<br>
    <input type="radio" name="data" ng-model="selection"> None<br>

    <div ng-show="data[selection]">        
        <input type="text" ng-model="data[selection].nested1" /> 
        <input type="text" ng-model="data[selection].nested2" />
    </div>

    <pre>{{ data[selection] }}</pre>

</div>

da controller で「データ」オブジェクトを初期化することを忘れないでください:

function MyCtrl ($scope) {
    $scope.data = {
        type1 : {},
        type2 : {}
    };
}

ここで確認できます：http://jsfiddle.net/WCqKz/2/

最後に、「データ」モデルを ng-init ディレクティブでインスタンス化することにより、コントローラーなしでそれを行うこともできます (ただし、お勧めしません)。

<div ng-app ng-init="data = { type1 : {}, type2 : {} }">

    <input type="radio" name="data" ng-model="selection" value="type1"> Type 1<br>
    <input type="radio" name="data" ng-model="selection" value="type2"> Type 2<br>
    <input type="radio" name="data" ng-model="selection"> None<br>

    <div ng-show="data[selection]">        
        <input type="text" ng-model="data[selection].nested1" /> 
        <input type="text" ng-model="data[selection].nested2" />
    </div>

    <pre>{{ data[selection] }}</pre>

</div>

ここを参照してください：http://jsfiddle.net/WCqKz/3/

于 2013-10-29T13:31:33.473 に答える