製品の価格を表示する方法

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です。 単位（KG、2KG..etc）に基づく複数の価格（200,300 ...など）を持つ1つの製品。私は1つの製品として表示したいですが、別の製品単位を選択すると、その製品の価格を取得する方法。 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>