Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Metronic HTML demo 53 with AngularJS and Select2 option
Hello.
I am using Metronic theme html demo 53 and AngularJS (1.6.9) for my project.
I am trying to set select2 as an option along with AngularJS but to no avail.
If I set
<select ng-change="selectedRow()" ng-model="selectedName" ng-options="x.Name for x in myData" class="form-select" data-control="select2" data-allow-clear="true" data-placeholder="Select an option" id="kt_ecommerce_edit_order_billing_country_man" name="billing_order_country">
</select>app.controller("articalCtrl", function($scope, $http) {
$http.get("products.php").then(function (response) {
$scope.myData = response.data.records;
});
$scope.selectedRow = function() {
alert("Selected");
}
});then select2 works but in that case I can't use AngularJS ng-change option because selectedRow() function doesn't work.
If I set
<select ng-change="selectedRow()" ng-model="selectedName" ng-options="x.Name for x in myData" class="form-select" data-placeholder="Select an option" id="kt_ecommerce_edit_order_billing_country_man" name="billing_order_country">
</select>without these options
data-control=select2 data-allow-clear=truethan my script work but I'm losing option for autocomplete.
My goal is to create a script for autocomplete option (for efficiently search large lists of items) using AngularJS (1.6.9) and Select2 in Metronic (8.1.8) demo 53.
Can you help me to solve that issue?
Replies (1)
Hi Alex,
Could you please try to follow these steps:
1. Remove the data-control="select2" and data-allow-clear="true" attributes from the < select> element.
2. Metronic should already have the Select2 library included. In your AngularJS controller, initialize the Select2 plugin after the data is loaded using the $http service. You can do this in the callback function of the $http.get method.
Example:
app.controller("articalCtrl", function($scope, $http) {
$http.get("products.php").then(function(response) {
$scope.myData = response.data.records;
// Initialize Select2 after data is loaded
$("#kt_ecommerce_edit_order_billing_country_man").select2();
});
$scope.selectedRow = function() {
alert("Selected");
};
});Make sure to replace "#kt_ecommerce_edit_order_billing_country_man" with the correct ID of your < select> element.
3. Now, you can use the ng-change directive to bind the selectedRow function for the desired functionality.
Example:
< select ng-change="selectedRow()" ng-model="selectedName" ng-options="x.Name for x in myData" class="form-select" data-placeholder="Select an option" name="billing_order_country">
</select>Hopefully, this will work. For your information, currently, we are not working with AngularJS in the latest version of Metronic.
Thanks
