Question

我有一个练习，我必须能够自定义一些笔记本电脑的选项。我正在从数据库中加载此选项。有四种可能的选择：RAM，处理器，视频，屏幕。对于输入模型，我想分别设置ng-model。

<div class="text-center">
<div class="marginTop">

    <p>{{laptop.selected.text}}</p>

    <div class="row" ng-repeat="x in laptop.customize">
        <div class="col-xs-3">
            <p>{{x.name}}</p>
        </div>
        <div class="col-xs-9">
            <label class="radio-inline" ng-repeat="y in x.options">
                <input type="radio"  name="{{x.name}}" ng-model="laptop.selected.{{x.name}}" ng-value="y.description">            {{y.description}}
            </label>
        </div>
    </div>

    <div class="col-xs-12">
        <a href="#order" ng-click="laptop.save()" class="btn btn-default" type="submit">En door</a>
    </div>
</div>

目标是设置ng-model="laptop.selected.RAM"或ng-model="laptop.selected.Processor"，但我找不到任何方法。

请原谅我的HTML，我是个菜鸟。

[编辑] laptop.customize中的JSON

[
{
"name": "RAM",
"options": [
  {
    "id": 1,
    "description": "4gb",
    "customizationlaptopid": 1,
    "pricedifference": -50
  },
  {
    "id": 2,
    "description": "6gb",
    "customizationlaptopid": 1,
    "pricedifference": 0
  },
  {
    "id": 3,
    "description": "8gb",
    "customizationlaptopid": 1,
    "pricedifference": 100
  }
]
},
{
"name": "Processor",
"options": [
  {
    "id": 4,
    "description": "i3 2.3Ghz",
    "customizationlaptopid": 2,
    "pricedifference": -100
  },
  {
    "id": 5,
    "description": "i5 2.7Ghz",
    "customizationlaptopid": 2,
    "pricedifference": 0
  },
  {
    "id": 6,
    "description": "i7 3.2GHz",
    "customizationlaptopid": 2,
    "pricedifference": 150
  }
]
},
{
"name": "Video",
"options": [
  {
    "id": 7,
    "description": "NVidia 720M 1GB",
    "customizationlaptopid": 3,
    "pricedifference": -100
  },
  {
    "id": 8,
    "description": "Nvidia 740N 2GB",
    "customizationlaptopid": 3,
    "pricedifference": 0
  },
  {
    "id": 9,
    "description": "Nvidia 980NX 6GB",
    "customizationlaptopid": 3,
    "pricedifference": 200
  }
]
}
]

Answer 1

您只需这样设置，因为您已经将值保存在y中，您也可以使用ng-change

获取所选值

<div class="marginTop">
    <p>{{laptop.selected.text}}</p>
    <div class="row" ng-repeat="x in laptop.customize">
        <div class="col-xs-3">
            <p>{{x.name}}</p>
        </div>
        <div class="col-xs-9">
            <label class="radio-inline" ng-repeat="y in x.options">
                <input type="radio"  name="{{x.name}}" ng-model="laptop.selected[y.name]" ng-change="getselected(y)"  ng-value="y.description">            {{y.description}}
            </label>
        </div>
    </div>
    <div class="col-xs-12">
        <a href="#order" ng-click="laptop.save()" class="btn btn-default" type="submit">En door</a>
    </div>
</div>

<强> DEMO

根据内容更改ng-repeat内输入的ng-model

1 个答案: