AngularJS: कई चेकबॉक्स

मैं चेक बॉक्स पर एक एकल चयन के लिए मजबूर करने कोशिश कर रहा हूँ के बीच एक का चयन करें, एक एचटीएमएल के समान "का चयन करें"AngularJS: कई चेकबॉक्स

मैं एक एचटीएमएल सरल तालिका है: मैं तो

<tr ng-repeat="subscription in entities"> 
    <td> 
     <input type="checkbox" ng-checked="isChecked(subscription)" ng-click="toggleSelection(subscription)"/> 
    </td> 
</tr>

अधिक आयु वालों के निर्देशों के लिए कुछ सरल नियंत्रक कार्य:

$scope.isChecked = function(entity) { 
    return $scope.checkedEntity === entity; 
}; 

$scope.toggleSelection = function(entity) { 
    entity.checked = !entity.checked; 
    if (entity.checked) { 
     $scope.checkedEntity = entity; 
    } else { 
     $scope.checkedEntity = null; 
    } 
};

दुर्भाग्य से यह काम नहीं करता है, और मुझे लगता है कि मैं सिर्फ पता चला क्यों .... एनजी क्लिक 0 प्राथमिकता है, बनाम एनजी जाँच के लिए 100।

इस समस्या के लिए एक सुरुचिपूर्ण समाधान है?

स्रोत

2014-04-24 Brian

आप अपने '$ scope' वस्तुओं –

साझा कर सकते हैं मैं माफी चाहता हूँ मैं तुम्हें क्या इसका मतलब यह नहीं मिलता है? – Brian

बाइंड ng-modelsubscription.checked के लिए, और ng-click अचिह्नित एक को छोड़कर सभी सदस्यता क्लिक किया है। चूंकि ये चेकबॉक्स हैं, एक क्लिक किया गया स्वयं टॉगल करेगा। http://plnkr.co/edit/XD7r6PoTWpI4cBjdIZtv?p=preview

स्रोत

2014-04-25 06:07:13

बहुत बढ़िया, बहुत बहुत धन्यवाद! दिलचस्प है, मैंने मूल रूप से उसमें एक छोटी विविधता की कोशिश की जहां मैं केवल एनजी-क्लिक पर वर्तमान इकाई को पास करता हूं, और फ़ंक्शन $ scope.entities पर पुनरावृत्त होता है जो समान डेटा संरचना होना चाहिए ... लेकिन किसी कारण से आपका काम और मेरा नहीं करता है! – Brian

यह वाक्यविन्यास अच्छा है: पी 'entities.map ((x, i) => x.checked = position === i);' – Kutyel

महान सहायता धन्यवाद, बहुत कुछ! –

मेरे सिर के ऊपर बंद, मैं तुम्हारे लिए तीन विकल्पों में से एक सुझाव देना चाहेंगे।

एक निर्देश लिखें जो आपके लिए चेकबॉक्स सेट अप करेगा और उनके भीतर राज्य का प्रबंधन करेगा। यह आदर्श नहीं है, क्योंकि आप अपने मॉडल के बारे में नियम बदल रहे हैं (केवल एक सदस्यता की जांच की जानी चाहिए) डीओएम मैनिपुलेशन समस्या में।
संरचना ऐसी है कि केवल एक सदस्यता कभी सक्रिय चिह्नित है अपने मॉडल। यह मुश्किल है, क्योंकि बदलाव पर मॉडल को संशोधित करने से आप एक और पाचन चक्र निकाल देंगे, जो आप चाहते हैं। चेक बॉक्स के बजाय
उपयोग रेडियो बटन। इससे आपको वह औपचारिकता मिल जाएगी जो आप चाहते हैं। :- पी

मैं विकल्प 3 के साथ जाऊंगा - मैं हमेशा मूल इनपुट तत्वों का लाभ लेने का प्रशंसक हूं।

<tr ng-repeat="subscription in entities"> 
<td><input type="radio" 
    ng-model="selection" 
    name="subscriptionRadio" 
    value="{{subscription}}"/> 
</td> 
</tr>

स्रोत

2014-04-24 21:43:12

1) सहमत, अप्रिय। 3 के लिए) ठीक है! यूआई मानकों के बारे में यूएक्स डिजाइनर के साथ एक बड़ा तर्क था, जो कि यूआई मानकों के बारे में सिर्फ सालों से नहीं बल्कि एक दशक से अधिक समय तक डेटिंग कर रहा था, लेकिन दुख की बात है कि यह चेकबॉक्स होना चाहिए ... * मुट्ठी हिलना * # 2 के लिए, मैंने उत्पत्ति को एनजी-मॉडल से बंधे सब्सक्रिप्शन, और उसके बाद एक एनजी-चेंज जो सभी सब्सक्रिप्शन में मॉडल को अपडेट करेगा।लेकिन इस मामले में, मॉडल को अद्यतन किया गया था, लेकिन जब तक मैंने jquery का उपयोग नहीं किया, तब तक "चेक" स्थिति नहीं बदली, लेकिन मैं इससे बचने की कोशिश कर रहा हूं। – Brian

आप क्या कर सकते हैं निर्देश स्थापित करें जैसे कि यह मॉडल परिवर्तन पर ट्रिगर करता है और चेकबॉक्स को पुन: कॉन्फ़िगर करता है। "दो-तरफा" बाध्यकारी निश्चित रूप से कोणीय निर्देशों में एक चीज है, और यह आपको यहां मदद कर सकती है। –

इसके अलावा, मुझे लगा कि अगर आप हो सकते हैं तो आप रेडियो बटन के साथ चले गए होंगे। ;) –

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <script> 
 
    angular.module('app', []).controller('appc', ['$scope', 
 
     function($scope) { 
 
     $scope.selected = 'other'; 
 
     } 
 
    ]); 
 
    </script> 
 
</head> 
 

 
<body ng-app="app" ng-controller="appc"> 
 
    <label>SELECTED: {{selected}}</label> 
 
    <div> 
 
    <input type="checkbox" ng-checked="selected=='male'" ng-true-value="'male'" ng-model="selected">Male 
 
    <br> 
 
    <input type="checkbox" ng-checked="selected=='female'" ng-true-value="'female'" ng-model="selected">Female 
 
    <br> 
 
    <input type="checkbox" ng-checked="selected=='other'" ng-true-value="'other'" ng-model="selected">Other 
 
    </div> 
 

 

 

 
</body> 
 

 
</html>

$scope.updateSelection = function(position, entities) { 
    angular.forEach(entities, function(subscription, index) { 
    if (position != index) 
     subscription.checked = false; 
    }); 
}

यहाँ एक काम कर डेमो है:

<tr ng-repeat="subscription in entities"> 
    <td> 
    <input ng-model="subscription.checked" ng-click="updateSelection($index, entities)" type="checkbox" /> 
    </td> 
</tr>

आप एक सादे for पाश का उपयोग कर सकते हैं, लेकिन angular's forEach हमें subscription के रूप में प्रत्येक आइटम उपनाम और पठनीयता में सुधार करने की अनुमति देता

स्रोत

2016-02-04 05:34:28 DAS

मैं नीचे दिए गए कोड का इस्तेमाल किया है इसी तरह की सुविधा प्राप्त करने के लिए। ट्रिक एनजी-क्लिक का उपयोग करना है जो इसे बहुत अच्छी तरह से उत्पन्न कर सकता है। चेकबॉक्स -1 & चेकबॉक्स -2 प्रकृति में बूलियन हैं।

<form> 
    <input type="checkbox" ng-click="checkbox-2 = false" ng-model="checkbox-1" > 
    <input type="checkbox" ng-click="checkbox-1 = false" ng-model="checkbox-2" > 
</form>

स्रोत

2016-09-10 02:50:34 Danish

AngularJS: कई चेकबॉक्स

उत्तर

संबंधित मुद्दे