AngularJS - Chosen localytics ng-change not working

Question

AngularJS - Chosen localytics ng-change not working

1.4k Views Asked by Fer VT At 04 April 2025 at 12:07

I'm trying to detect when I select an option from an AngularJS chosen localytics dropdown.

Here's the code for the dropdown:

<select chosen data-placeholder="Buscar..." 
    class="w-100" 
    ng-model = "medSearchType"
    ng-change = "changeMedSearch(medSearchType)">
        <option value="Medicamento">Medicamento</option>
        <option value="Componente">Componentes Activos</option>
</select>

And in my controller I have the following function:

$scope.changeMedSearch = function (searchType) {
    console.log(searchType);
}

It works fine the first time, but if I want to select another option in the console I get the following error, and alos the dropdown won't select the other option I want to select:

Uncaught TypeError: Cannot set property 'selected' of undefined

How can I solve this?

Thanks a lot.

Original Q&A

There are 3 best solutions below

Jorawar Singh On 13 August 2016 at 18:57

Try to use ng-options instead.

angular.module("app",[]).controller("ctrl",function($scope){
    $scope.items = [1,2,3,4,5,6]
    $scope.changeMedSearch = function(medSearchType){
      alert(medSearchType)
    }
  })

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  
</head>
<body ng-app="app" ng-controller="ctrl">
  <select ng-model = "medSearchType"
    ng-change = "changeMedSearch(medSearchType)" ng-options="size as size for size in items" 
   ng-model="item" ng-change="update()"></select>
</body>
</html>

GTRekter On 04 March 2020 at 16:24

script.js

App.controller('permissionManagerController', ['$scope', '$http', '$q', 'ngToast', '$uibModal', '$window', 'permissionManagerRepository', function ($scope, $http, $q, ngToast, $uibModal, $window, PermissionManagerRepository) {

    var ctrl = this;

    // Variables
    $scope.testitem = 103; 
    $scope.search = {
        country: null,
        ...
    };
    $scope.lists = {
        countries : [],
        ...
    };
    // Methods
    ctrl.init = function () {
        var promises = {
            countries: PermissionManagerRepository.getCountries(),
            ...
        };
        $q.all(promises).then(function succes(values) {
            $scope.lists.countries = values.countries;
            ...
        }, function errorCallback(xhr, ajaxOptions, thrownError) {
            console.log("REST API call failed with status: " + xhr.status + " and error: " + thrownError);
        });
    };
    // Utilities
    $scope.reloadAffiliates = function (idCountry) {
        $scope.search.country = country;
        if (idCountry) {
            var promises = {
                affilates: PermissionManagerRepository.getAffiliatesByCountry(idCountry)
            };
            $q.all(promises).then(function succes(values) {
                $scope.lists.affilates = values.affilates;
            }, function errorCallback(xhr, ajaxOptions, thrownError) {
                console.log("REST API call failed with status: " + xhr.status + " and error: " + thrownError);
            });
        }   
    };
}]);

NOT WORKING EXAMPLE

<select chosen
        data-placeholder-text-single="'Chose countries...'"
        allow-single-deselect="true"
        search-contains="true"
        class="form-control"
        ng-model="search.country"
        ng-options="ct.IdCountry as ct.CountryNm for ct in lists.countries"
        ng-change="reloadAffiliates(search.country)">
</select>

In this case, when the change event is fired because the user select an option, the search.country has the id as value. Otherwise, if the user click over the <abbr class="search-choice-close"></abbr>then the values is not null but the last value assigned to the variable.

WORKING EXAMPLE

<select chosen
        data-placeholder-text-single="'Chose countries...'"
        allow-single-deselect="true"
        search-contains="true"
        class="form-control"
        ng-model="search.country"
        ng-options="ct.IdCountry as ct.CountryNm for ct in lists.countries"
        ng-change="reloadAffiliates(search.country)">
    <option value=""></option>
</select>

In this case, when the change event is fired because the user select an option, the search.country has the id as value. Otherwise, if the user click over the <abbr class="search-choice-close"></abbr>then the values is null.

**Fer VT** · Accepted Answer

I followed MrJSingh's advice and use ng-options, but the problem still happened.

I added then an empty and it finally worked

<select chosen data-placeholder="Buscar..." 
     ng-model = "medSearch"
     ng-change = "changeMedSearch(medSearch)"
     ng-options = "size as size for size in medSearchTypes">
     <option></option>
</select>

AngularJS - Chosen localytics ng-change not working

There are 3 best solutions below

Related Questions in ANGULARJS

Related Questions in ANGULARJS-NG-CHANGE

Related Questions in ANGULAR-CHOSEN

Trending Questions

Popular # Hahtags

Popular Questions