2013-02-25 51 views
8

चुना मेरी कोणीय दृश्य के अंदर में, मेरा जहां मैं चुना कार्यक्षमता जोड़ने के लिए चाहते हैं:Angular.js एकीकरण

<select ng-options="value for value in deutscheBankEvent.dates" ng-init="" ng-model="chosenA" class="chzn-select"> 
<option style="display:none" value="">Wählen Sie ein Datum</option> 
</select><br/> 

मेरी नियंत्रक: जब मैं यहाँ .chosen समारोह इंजेक्षन, यह विकल्प साफ करता है।

function Ctrl($scope,$http) { 

    $scope.text = ''; 
    $scope.user = {name: '', last: '', location: ''}; 
    $scope.value = 0; 
    $scope.sendForm = function(){ 
     $http.post('/Submit/To/Url', $scope.data).success(function(data) { 
      alert('done!'); 
     }); 
    }; 
} 

मेरी पाद लेख:

<g:javascript> 
$(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true}); 
      jQuery(".adressen1_chzn-select").chosen();jQuery(".adressen0_chzn-select").chosen(); 
     }); 
</g:javascript> 

मैं पता नहीं है, कैसे चुना काम कर पाने के लिए। अंदर नियंत्रक यह विकल्प साफ़ करता है और लागू नहीं होता है, बाकी कोई फर्क नहीं पड़ता है। किसी भी विचार की सराहना की

उत्तर

7

आप शायद http://angular-ui.github.com/

यह कोणीय निर्देशों का एक सूट है प्रयास करना चाहिए। उनमें से आपको 'select2' निर्देश मिलेगा जो को प्रॉक्सी के रूप में कार्य करता है प्लगइन (चयन 2 प्लगइन सटीक होने के लिए)।

+5

चयन 2 चयनित के समान नहीं है। – thomaux

+2

@ एंजियो मुझे लगता है कि मैंने इसे स्पष्ट कर दिया है। – Stewie

+0

दूसरा समाधान आसान है, मुझे जल्द ही नीचे स्क्रॉल करना चाहिए था! – trueinViso

10

आपका समाधान काम नहीं करेगा क्योंकि तत्व वास्तव में डोम में तत्व बनने से पहले jQuery कोड आग लग जाएगा। आपको फॉर्म तत्व पर निर्देश का उपयोग करके इस समस्या को हल करना चाहिए।

तत्व को गतिशील रूप से बनाया जाना चाहिए और इसलिए आप वास्तव में डीओएम तत्व पर काम कर रहे हैं - कोणीय के निर्देशों के लिए उपयुक्त फिट। JQuery का कोई उपयोग आवश्यक नहीं है और कोणीय के साथ काम करते समय इसे टालने का प्रयास करें। ध्यान दें कि jQuery को अभी भी के कारण निर्भरताओं के कारण आवश्यक है।

  1. कोणीय चुने हुए निर्देश https://github.com/localytics/angular-chosen
  2. [वैकल्पिक] Bootstrap3 स्टाइल https://github.com/alxlit/bootstrap-chosen

मैं सुझाव के निर्देश अपने आप को लिखने का प्रयास करने के लिए:

मैं इस सेट का उपयोग समस्या का समाधान। यह एक अच्छा अभ्यास है। आप इसके साथ प्रयास कर सकते हैं: http://www.youtube.com/watch?v=8ozyXwLzFYs

शुभकामनाएँ!

+1

यह समाधान है। यह एक ही चयन पर काम करता है। दूसरी ओर, एंगुलरयूआई यूआई-सिलेक्ट को लागू करना बहुत मुश्किल है, यह एक पूरी तरह से अलग अर्थपूर्ण है। –