如何在angularjs中根据产品单位显示产品价格

Question

[
  {
    "categoryId": 0,
    "discountPrice": 100,
    "productDescription": "Abc",
    "productId": "2N04L1O4L4",
    "productImage": "image1.jpg",
    "productName": "Abc",
    "productPrice": 200,
    "productUnit": "1kg",
    "quantity": 0
  },
  {
    "categoryId": 0,
    "discountPrice": 300,
    "productDescription": "abc",
    "productId": "2N04L1O4L4",
    "productImage": "http://image1.jpg",
    "productName": "Abc",
    "productPrice": 400,
    "productUnit": "2kg",
    "quantity": 0
  },
  {
    "categoryId": 0,
    "discountPrice": 500,
    "productDescription": "good",
    "productId": "A0091JNG4O",
    "productImage": "image2.jpg",
    "productName": "Xyz",
    "productPrice": 500,
    "productUnit": "1kg",
    "quantity": 0
  },
  {
    "categoryId": 0,
    "discountPrice": 250,
    "productDescription": "Demo",
    "productId": "QQ769GPQJ2",
    "productImage": "image33.jpg",
    "productName": "Toor dal",
    "productPrice": 250,
    "productUnit": "1kg",
    "quantity": 0
  }
]

嗨，我正在开发电子商务应用程序。这是我的json。 这里有一种产品具有多种价格（200,300 ......等），基于单位（KG，2KG..etc）。我希望显示为一个产品，但是当我选择不同的产品单元时，如何获得该产品的价格。 如何在Angularjs中实现这一点。

Answer 1

最好有更多的信息和JSFiddle供我们协助..

您可能会重新考虑数据的结构。产品可以有选择。

这是一个JSFiddle，我希望能回答你的问题：

http://jsfiddle.net/ltfleming/3sfrxex5/3/

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {


  $scope.product = {
    name: 'Flour',
    options: [{
      "categoryId": 0,
      "discountPrice": 100,
      "productDescription": "Abc",
      "productId": "2N04L1O4L4",
      "productImage": "image1.jpg",
      "productName": "Abc",
      "productPrice": 200,
      "productUnit": "1kg",
      "quantity": 0
    }, {
      "categoryId": 0,
      "discountPrice": 300,
      "productDescription": "abc",
      "productId": "2N04L1O4L4",
      "productImage": "http://image1.jpg",
      "productName": "Abc",
      "productPrice": 400,
      "productUnit": "2kg",
      "quantity": 0
    }, {
      "categoryId": 0,
      "discountPrice": 500,
      "productDescription": "good",
      "productId": "A0091JNG4O",
      "productImage": "image2.jpg",
      "productName": "Xyz",
      "productPrice": 500,
      "productUnit": "1kg",
      "quantity": 0
    }, {
      "categoryId": 0,
      "discountPrice": 250,
      "productDescription": "Demo",
      "productId": "QQ769GPQJ2",
      "productImage": "image33.jpg",
      "productName": "Toor dal",
      "productPrice": 250,
      "productUnit": "1kg",
      "quantity": 0
    }]
  };

}

<div ng-controller="MyCtrl">
  <h1>
    {{product.name}}
  </h1>

  <select ng-model="selectedOption" ng-options="option.productName for option in product.options">
    <option value="">-- choose option --</option>
  </select>

  <div ng-if='selectedOption'>
    <p>
      <label for="">Product ID:</label>{{selectedOption.productId}}</p>
    <p>
      <label for="">Description:</label>{{selectedOption.productDescription}}</p>
    <p>
      <label for="">Price:</label>{{selectedOption.productPrice}}</p>
  </div>
  <img ng-src="{{selectedOption.productImage}}" alt="image">
</div>