/ / जेएसएन के निश्चित तत्व को कोणीय जेएस में उपयोग करें - जेसन, एंगुलरज

कोणीय जेएस - जेसन, angularjs में जेएसओएन के कुछ तत्व का उपयोग करें

नीचे मेरी JSON फ़ाइल है:

[
{
"Name":"Peter England Shirt",
"Prodimage":["./images/zoom/zoom1hi.jpg","./images/zoom/zoom2hi.jpg","./images/zoom/zoom3hi.jpg"],
"actualPrice":"90",
"discountedPrice":"70",
"desc":"Cotton",
"Prodcolor":["#f1f40e","#adadad","#4EC67F"],
"quantity":[1,3,4,5,60],
"size":["XL","L","M","S"],
"detail":"Take it away",
"sizeChart":["16 waist","Measurements taken from size 30","Model wears size 31. Model is 6"2"],
"shipping":[
{
"type":"Standard",
"days":"5-6 days",
"cost":"200"
},{
"type":"Next day",
"days":"1 days",
"cost":"500"
}
],
"sellerList":[
{
"sellerName":"ABC",
"price":"566",
"deliveryDay":"4-5 working days"
},{
"sellerName":"SEDF",
"price":"300",
"deliveryDay":"4-5 working days"
},{
"sellerName":"QWER",
"price":"555",
"deliveryDay":"2-5 working days"
}
]

}
]

जेएस फ़ाइल नीचे दी गई है:

var pJson="./json/product.json";
$http.get(pJson).success(function(response){
$scope.product=response;});

अब, यदि मैं "नाम" विशेषता का उपयोग करना चाहता हूं तो मैं {{उत्पाद [0] .Name}} पर कॉल कर सकता हूं।

लेकिन मैं एनजी-रिपीट का उपयोग करके प्रोडिमेज विशेषता तक पहुंचने में सक्षम नहीं हूं। मैं इस तरह की कोशिश कर रहा हूँ:

    <div  ng-repeat="image in product.Prodimage">
{{image[0]}}
</div>

क्या यह गलत है?>

उत्तर:

उत्तर № 1 के लिए 1

हाँ यह गलत है, ध्यान दें कि आपके पास उत्पाद वस्तु है सरणी , इसलिए यदि आप पहली वस्तु चाहते हैं तो आपको ऐसा करना चाहिए

<div  ng-repeat="image in product[0].Prodimage">
{{image[0]}}
</div>

या यदि आप सभी उत्पादों पर पुनरावृति करना चाहते हैं, तो आपको नेस्टेड एनजी-रिपीट करने की आवश्यकता है

<div  ng-repeat="p in product">
<div  ng-repeat="image in p.Prodimage">
{{image[0]}}
</div>
</div>

उत्तर № 2 के लिए 1

आप उस पर लूप कर सकते हैं, बाहर की ओर तकनीकी रूप से एक सरणी है, और उपयोग करें $first आप केवल पहली छवि को हथियाने की इच्छा के उदाहरण के लिए। आप भी इस्तेमाल कर सकते हैं $index लेकिन यह एक फ़ंक्शन के माध्यम से चल रहा है जो जांच करता है $index.

यहां बेवकूफ http://jsfiddle.net/HB7LU/15324/

मैं बस इसे दो बार पाश की तरह काम कर रहा हूँ

<div  ng-repeat="prod in product">
<div  ng-repeat="image in prod.Prodimage">
<div ng-show="$first">
{{image}}
</div>
</div>
</div>

उसके बाद भीतर के दोहराव में एक div डाल देंगेकेवल यह दिखाएं कि क्या यह पहला आइटम है। फिर आप इंडेक्स द्वारा दिखाने के लिए उस तर्क को बदल सकते हैं, या जो कुछ भी आप चाहते हैं।

देखें बेला - http://jsfiddle.net/HB7LU/15332/

<div ng-show="checkIndex($index)"> << or whatever index you want
{{image}}
</div>

और नियंत्रक में

 $scope.checkIndex = function(item){
if(item === 0){
return true;
}else{
return false;
}
}

आप केवल वर्तमान आइटम के इंडेक्स को रिपीट में पास करते हैं और उसकी जांच करते हैं। मैं इस तर्क की सिफारिश करूंगा Prodimage[0] तर्क इसलिए कि आप इसे html में हार्डकॉक नहीं कर रहे हैं, इसलिए यदि आपको वांछित इंडेक्स को बदलना है, तो आप इसे कंट्रोलर में बदल सकते हैं, टेम्प्लेट में नहीं। checkIndex एक त्वरित उदाहरण है, आप इसे बदल सकते हैं जो आप चाहते हैं।


जवाब के लिए 0 № 3

$scope.product[n].Prodimage एक सरणी है। तो, आपको अपने माध्यम से लूप करने की आवश्यकता है product पहले सरणी, और फिर के माध्यम से लूप Prodimage प्रत्येक उत्पाद की सरणी:

<div ng-repeat="prod in product">
<div ng-repeat="image in prod.Prodimage">
{{ image }}
</div>
</div>

बेशक, आप भी कुछ इस तरह से nth छवि का उपयोग कर सकते हैं:

<div ng-repeat="prod in product">
{{ prod.Prodimage[0] }}
</div>

उत्तर के लिए -1 № 4

क्या आप अपना जसन बदल सकते हैं

"Prodimage":[
{ "loc": "./images/zoom/zoom1hi.jpg"},
{ "loc": "./images/zoom/zoom2hi.jpg"},
{ "loc": "./images/zoom/zoom3hi.jpg"}],

तो आपका पाश काम करना चाहिए

<div  ng-repeat="image in product.Prodimage">
{{image.loc}}
</div>