如何在angularjs中显示基于产品单位的产品价格

[ 
    { 
    "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中实现这一点。如何在angularjs中显示基于产品单位的产品价格

来源

2016-10-27 Mahabub baig

目前你尝试过什么。 – Jhecht

我创建了两个数组，一个用于图像，名称，描述，其他用于价格，discountprice，productunits。在这两个阵列中，productid是关键。但我没有达到我想要的。 –

这将是很好有更多的信息和对的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>

来源

2016-10-27 04:51:36

感谢您快速回复Liam Fleming。我会尝试。 –

我用ng-repeat代替了ng-options，但它不起作用 –

请问您可以添加一个JSFiddle。 –

如何在angularjs中显示基于产品单位的产品价格

回答

相关问题