angularjs - कई तत्वों पर एनजी-क्लिक के साथ टॉगल क्लास




angularjs-ng-click (2)

मैं एनजी-क्लिक के साथ व्यक्तिगत रूप से कई तत्वों पर कक्षाओं को कैसे टॉगल कर सकता हूं?

इस सवाल में https://stackoverflow.com/a/22072110/2169327 एक क्लिक के साथ टॉगल करने वाली कक्षाएं इस तरह थीं:

सीएसएस:

.red {
    color: red;
}

जे एस:

$scope.toggle = false;

HTML:

<button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>

लेकिन क्या होगा अगर मेरे पास कई बटन हैं जो प्रत्येक को अपनी कक्षा को एनजी-क्लिक के साथ टॉगल करना चाहिए?

अगर मैं इसे इस तरह सेट करता हूं:

HTML:

<button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>
<button id="btn2" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>

अगर मैं एक दबाता हूं तो दोनों बटन टॉगल हो जाते हैं।

मुझे पता है कि प्रत्येक बटन (f.ex toggle1 for button1, toggle2 for button2) के लिए स्वयं की एनजी-क्लिक घटना को परिभाषित करना है - लेकिन क्या यह सबसे अच्छा तरीका है?


अपनी आवश्यकताओं के आधार पर, आप टॉगल का प्रतिनिधित्व करने वाले एक सरणी के साथ ng-repeat उपयोग करने में सक्षम हो सकते हैं। उदाहरण के लिए:

आपकै विचार:

<div ng-repeat="toggle in toggles">
    <button id="btn" ng-click="toggle.state = !toggle.state" ng-class="{'red' : toggle.state}">Change Class</button>
</div>

अपने नियंत्रक के अंदर:

$scope.toggles = [{ state: true }, { state: false }, { state: true }];

इस तरह आप अपने बटन पर केवल सरणी, या आंतरिक सरणी वस्तुओं को अपडेट करके सेट कर सकते हैं (आपको अधिक जटिलता की आवश्यकता है)।


नियंत्रक के अंदर

 $scope.stateToggle=false;
$scope.togglelasses=function(){
     $scope.stateToggle= !$scope.stateToggle;
}

देखने में उपयोग एनजी वर्ग

 <button ng-click="togglelasses()" ng-class="stateToggle? 'active ': ' '">

प्रत्येक तत्व में एनजी-क्लास जोड़ें जहाँ आप कक्षा को सक्रिय करना चाहते हैं





angularjs-ng-click