Question

我是Angular的新手，我在：https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router

使用多页表单模型

在我选择品牌和过滤器的小型车模型中似乎运行良好，因此弹出适当的模型。选择模型后，我应该能够获取该模型的选项（模型对象中包含的数组）。我可以看到我有正确的模型对象，并且它有Options对象数组，但是因为我对选项的ng-repeat没有用，我验证了，虽然我可以解析模型对象，但如果我尝试访问它的任何成员都失败了。

这个html：

<label>Next select the model for your Dream Car</label>
<div class="form-group" ng-repeat="lModel in modelList | filter:formData.brand">
    <div class="radio">
        <label>
           <input type="radio" ng-model="formData.model" value="{{lModel}}">
           Bring on the {{lModel.Model}} with options: {{lModel.Options}}
        </label>
    </div>
</div>

<label>Debug model.Model: {{formData.model.Model}}<br></label>
<label>Debug model.baseCost: {{formData.model.baseCost}}<br></label>
<label>Debug model: {{formData.model}}<br></label>
<label>Debug model.Options: {{formData.model.Options}}<br></label>
<label>It's all about these great accessories</label>
<div class="form-group" ng-repeat="lOption in formData.model.Options">
    <div class="radio">
        <label>
           <input type="radio" ng-model="formData.option" value="{{lOption.Description}}">
           Bring on the {{lOption.Description}}
        </label>
    </div>
</div>

显示结果：

Next select the model for your Dream Car
Bring on the Huracan LP 610 Spyder **with options**: [{"Option":"HurricanesDetailing","Description":"Special detailing for your Carolina Hurricanes","Cost":"3200"},{"Option":"FluxCapacitor","Description":"Flux Capacitor for Time Travel","Cost":"26000"}]
Bring on the Adventador LP 750 SuperVeloce Roadster with options: [{"Option":"VolumeTires","Description":"Tires that play loud audio","Cost":"5200"},{"Option":"FluxCapacitor","Description":"Flux Capacitor for Time Travel","Cost":"26000"}]
Debug model.Model:
Debug model.baseCost:
Debug model: {"_id":"Lamborghini:001","_rev":"1-8d0a9b1ed46bd0ec8228cd475de94c84","Model":"Adventador LP 750 SuperVeloce Roadster","baseCost":"125000",**"Options"**:[{"Option":"VolumeTires","Description":"Tires that play loud audio","Cost":"5200"},{"Option":"FluxCapacitor","Description":"Flux Capacitor for Time Travel","Cost":"26000"}]}

如果您可以通过我的尝试将html显示为html并在我的调试中突出显示其中一些...在模型的单选按钮中，我可以访问Options数组。在所选的模型中，我有Options数组，但是在ng-repeat（以及我输入的调试标签中）......我似乎无法访问模型对象的成员（包括Options数组）。我愿意接受我在这里做一些愚蠢的事情，但这对我来说根本不清楚是什么。谢谢，

Answer 1

来自angular documentation：

https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

值字符串

选中时应设置ngModel表达式的值。请注意，值仅支持字符串值，即范围模型也需要是字符串。如果您需要复杂的模型（数字，对象，......），请使用ngValue。

ngValue 字符串

选择无线电时将设置ngModel的角度表达式。如果需要非字符串ngModel（boolean，array，...），则应使用value属性代替value。

您使用ng-model="formData.model" value="{{lModel}}"设置模型。所以你有效地将lModel字符串化为JSON，并将该JSON字符串存储到formData.model。

如文档所示，您需要的是ng-model="formData.model" ng-value="lModel"

Angular不解析先前单选按钮的变量

1 个答案: