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 对象的嵌套属性。当模型的type属性被设置时，它会显示另外 2 个兄弟值（nested1和nested2) 用于操作。当您使模型本身无效时会出现问题 - 在这种情况下，嵌套值也会无效。我需要保护它们。在我看来，这不是错误或任何东西，它只是它的工作方式。

任何关于如何保留无效值的想法将不胜感激。

有趣的是，如果我只有 2 个ng-model="data"使用 ng 值指向模型本身的单选选项，{}并且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 控制器中初始化您的“数据”对象：

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