Question

我是Angular JS的新手，我目前正在构建一个订单表单，用户可以使用表单以图形方式构建他们的项目。我有一个json文件，其中列出了产品的所有元素（框架，背景，字母，消息）及其SKU和价格。我可以将json作为“产品”添加到应用程序中，但我希望能够根据用户选择获取此数据，即如果用户选择金框，我想创建一个包含的变量来自json的SKU，金框的价格和重量。希望这是有道理的。

在https://jsfiddle.net/3kd796wL/有一个演示，这是我的json文件：

{
  "products":
    {
      "frames": {
        "plastic": {
          "SKU": "PLA",
          "price": 1.00,
          "weight": 1.00
        },
        "wood": {
          "SKU": "WOO",
          "price": 6.00,
          "weight": 3.00
        },
        "silver": {
          "SKU": "SIL",
          "price": 12.00,
          "weight": 6.00
        },
        "gold": {
          "SKU": "GOL",
          "price": 18.00,
          "weight": 12.00
        }
      },
      "backgrounds":{
        "feet":{
          "SKU": "BK01",
          "price": 1.00,
          "weight": 0
        },
        "flowers":{
          "SKU": "BK02",
          "price": 1.00,
          "weight": 0
        },
        "rabbits":{
          "SKU": "BK01",
          "price": 1.00,
          "weight": 0
        }
      }
    }
}

感谢任何帮助。感谢。

Answer 1

更改框架选择代码如下

 <label for="frame">Choose a frame</label>{{frame}}
    <select name="frame" id="frame" class="form-control" ng-model="frame" ng-options="key for (key, value) in products.products.frames">
    </select>

在上面的代码片段中，我使用了 ng-options ，它通过迭代对象数组来创建选项。设置 ng-model ='frame'，以便每当您更改任何内容时，都会对该对象产生影响。对于参考检查https://docs.angularjs.org/api/ng/directive/ngOptions

获取控制器中的json数据，并将数据用作变量和函数等

1 个答案: