मैं अपने div को छिपाने की कोशिश कर रहा हूं जिसमें आईडी = "क्रॉसफ़ेड" है जहां एक एनजी-क्लिक ईवेंट है।
1) क्या यह संभव है? 2) मैं क्या गलत कर रहा हूँ?
<!DOCTYPE html>
<html lang="en" ng-app="myContent">
<head>
<meta charset="UTF-8">
<title>ShopME Tops</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js
"></script>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body ng-controller="ContentController">
<header>
<div class="header-inner2">
<nav>
<ul class="center">
<li><a ng-click="getData('SWIMWEAR')">SWIMWEAR</a></li>
<li><a ng-click="getData('TOPS')">TOPS</a></li>
<li><a ng-click="getData('BOTTOMS')">BOTTOMS</a></li>
<li><a ng-click="getData('DRESSES')">DRESSES</a></li>
<li><a ng-click="getData('SHOES')">SHOES</a></li>
<li><a ng-click="getData('ACCESSORIES')">ACCESSORIES</a
</li>
</ul>
</nav>
</div>
</header>
<!-- crossfade images-->
<div id= "crossfade" ng-hide="getData('TOPS')">
<img src="images/cover1.png" alt="#">
<img src="images/cover2.png" alt="#">
<img src="images/cover3.png" alt="#">
<img src="images/cover4.png" alt="#">
<img src="images/cover5.png" alt="#">
</div>
<!-- Container for grid layout -->
<div class="container">
<div class="row">
<div class="col" ng-repeat="x in filtered | limitTo:4">
<img class="img-responsive1" ng-src="{{x.source}}" alt="#">
</div>
</div>
</div>
</body>
</html>
तो मूल रूप से, कभी भी एनएवी बार में कुछ क्लिक किया जाता है, मैं क्रॉसफ़ेड डिव को छिपाना चाहता हूं।
यहाँ कोड की पंक्ति है जिसके साथ मैं काम कर रहा हूँ:
<div id= "crossfade" ng-hide="getData('TOPS')">
तो विशेष रूप से, जब TOPS क्लिक किया जाता है तो div crossfade छुपाएं।
ऐसा होने के बजाय जब मैं पृष्ठ लोड करता हूं तो मुझे अपना क्रॉसफ़ेड और मेरा TOPS डेटा मिलता है और मैं किसी और चीज़ पर क्लिक नहीं कर सकता।
मैंने एनजी-इफ और एनजी-इनिट के साथ भी प्रयोग किया। एनजी-इनिट ने लगभग काम किया लेकिन मेरा क्रॉसफ़ेड कोणीय में लागू नहीं हुआ है। जेएस यह मुख्य रूप से सीएसएस है।
4 जवाब
हाँ यह निश्चित रूप से संभव है। ng-hide बूलियन मान की अपेक्षा करता है, चाहे वह सही हो या गलत। क्या getData('Tops') आपके नियंत्रक में एक बूलियन लौटा रहा है? मैं ng-hide के व्यवहार को नियंत्रित करने के लिए फ़ंक्शन के बजाय $scope चर का उपयोग करने की अनुशंसा करता हूं। तो अपने getData() फ़ंक्शन में, आप कुछ इस तरह असाइन कर सकते हैं: $scope.hideCrossfade = true;।
फिर आपके विचार में, केवल <div id= "crossfade" ng-hide="hideCrossfade"> का प्रयोग करें। Div को फिर से दिखाई देने के लिए आप अपने कंट्रोलर में हमेशा $scope.hideCrossfade = false; बदल सकते हैं।
<div id= "crossfade" ng-hide="hideCrossfade">
<img src="images/cover1.png" alt="#">
<img src="images/cover2.png" alt="#">
<img src="images/cover3.png" alt="#">
<img src="images/cover4.png" alt="#">
<img src="images/cover5.png" alt="#">
</div>
और नियंत्रक सेट में
$scope.hideCrossfade = true;
शायद समारोह के अंदर getData.
मैं कोणीय में आईडी का उपयोग नहीं करने की सलाह दूंगा। साथ ही, ng-show, ng-hide, ng-if = "someFunction ()" भी आमतौर पर हतोत्साहित किया जाता है।
getData फ़ंक्शन को देखे बिना वास्तव में क्या गलत है, यह पता लगाना थोड़ा कठिन है, लेकिन जो मैं देख सकता हूं, उसके लिए यहां कुछ सुझाव दिए गए हैं
सबसे पहले, किसी फ़ंक्शन से कभी भी बाध्य न हों, इसे डीबग करना मुश्किल है और इसके महंगा प्रदर्शन के अनुसार।
यहां एक समाधान है जो काम करेगा। मैं प्रत्येक आइटम के लिए या तो हार्ड कोडिंग गुणों का सुझाव दूंगा या एक सरणी का उपयोग करूंगा। मैंने सादगी के लिए यहां एक ही संपत्ति का उपयोग किया है।
एचटीएमएल
<header>
<div class="header-inner2">
<nav>
<ul class="center">
<li><a ng-click="showSwimwear()">SWIMWEAR</a></li>
...
</ul>
</nav>
</div>
</header>
<div id= "crossfade" ng-hide="swimwearVisible">
<img src="images/cover1.png" alt="#">
...
</div>
जेएस
swimwearVisible = false;
showSwimwear(){
this.swimwearVisible = !this.swimwearVisible;
}
जब आप लिंक पर क्लिक करेंगे तो सब कुछ ठीक हो जाएगा और div दिखाई देगा और छिप जाएगा। यह आपको डिबग करने में मदद करने के लिए वर्तमान स्थिति भी दिखाएगा।
यदि वे एक ही नियंत्रक में हैं तो आप एनजी-छिपाने के लिए एक स्कोप वैरिएबल सेट कर सकते हैं। कुछ इस तरह:
$scope.hideCrossfade = false;
function getData(mType) {
$scope.hideCrossfade = true;
}
और आपके एचटीएमएल . में
<div id="crossfade" ng-hide="hideCrossfade">
यदि आपका हेडर कंट्रोलर और कंटेंट कंट्रोलर अलग हो गए हैं, तो आप $broadcast . का उपयोग करना चाहेंगे
आपके शीर्षलेख नियंत्रक में:
$scope.getData = function(mType) {
$scope.$broadcast('hideCrossfade', true);
};
और आपके सामग्री नियंत्रक में
var deregisterFn = $scope.$on('hideCrossfade', function($event, hide) {
$scope.hideCrossfade = hide;
};