एंगुलर जेएस

Question

के साथ चयन 2 ईवेंट हैंडलिंग मुझे कोणीय जेएस का उपयोग करके मेरी चुनिंदा 2 ऑन-चेंज इवेंट में आग लगने में कोई समस्या है।

<select ui-select2="{allowClear:true}" data-placeholder="Select a Department" ng-change="DoSomething()" class="input-max" ng-model="l.DepartmentID"> 
    <option value=""></option> 
    <option ng-repeat="d in l.LineLookups.Departments" value="{{d.DepartmentID}}">{{d.Type}}</option> </select> 

चुनिंदा सेवा लटकती परिवर्तन, परिवर्तन घटना आग नहीं करता है:

यहाँ मेरी एचटीएमएल है।

$scope.DoSomething = function() { 
     alert('here'); 
     ... 
} 

सबसे अच्छा तरीका यह संभाल करने के लिए क्या है: यहाँ मेरी नियंत्रक में मेरी ईवेंट हैंडलर है? मुझे मॉडल मूल्य पर एक घड़ी सेट करने के लिए कहा गया है। क्या वह काम करेगा, या कोई बेहतर तरीका है?

ध्यान में रखते हुए:

<select ui-select2="{allowClear:true}" data-placeholder="Select a Department" class="input-max" ng-model="l.DepartmentID"> 
<option value=""></option> 
<option ng-repeat="d in l.LineLookups.Departments" value="{{d.DepartmentID}}">{{d.Type}}</option> 
</select> 

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

$scope.$watch('l.DepartmentID', function (newVal, oldVal) { 
    if (oldVal == newVal) return; 
    alert('here'); 
}, true); 

Answer 1

देख एनजी-मॉडल के आधार पर वैकल्पिक बस एक कोणीय घटना को आग लगती है - इस तरह कुछ:

// Set initial value - I'm not sure about this but it seems to need to be there 
    elm.select2('data', controller.$modelValue); 
    elm.on('change', function() { 
     scope.$emit('select2:change', elm); 
    }); 

और फिर नियंत्रक पूर्णांक एक कोणीय घटना श्रोता रजिस्टर:

$scope.$on('select2:change', function (event, element) { 
     console.log('change fired by' + element.get(0).id); 
    }); 

Answer 2

आप कोणीय-ui पुस्तकालय है, जो तब के लिए एक jQuery श्रोता जोड़ सकता है

Answer 3

मैं चयन और फिर लिंक समारोह में मैं सिर्फ चुनिंदा तत्व और ईवेंट हैंडलर पर पुनः प्राप्त संपुटित के लिए एक निर्देश का इस्तेमाल किया।

मार्कअप

<select data-ng-model="tagsSelection" ui-select2="select2Options"> 
    <option value="{{user.id}}" data-ng-repeat="user in users">{{user.name}}</option> 
</select> 

जावास्क्रिप्ट:

link: function (scope, element, attributes) { 
    var select = element.find('select')[0]; 
    $(select).on("change", function(evt) { 
     if (evt.added) { 
      // Do something 
     } else if (evt.removed) { 
      // Do something. 
     } 
    }); 

    $scope.select2Options = { 
     multiple: true 
    } 
}