Question

考虑这个应用程序（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属性被设置时，它会显示另外两个兄弟值（nested1和nested2）以进行操作。取消模型本身时会出现问题 - 在这种情况下，嵌套值也会无效。我需要保留它们。在我看来，它不是一个错误或任何东西，它只是它的工作方式。

非常感谢任何有关如何保留无效化值的想法。

有趣的是，如果我只有2个无线电选项指向模型本身ng-model="data"使用ng值{}和null - 它可以开箱即用。这是演示预期行为的小提琴：http://jsfiddle.net/v3bgs/

Answer 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/

如何在控制器中缓存条件值？

1 个答案: