Failure to choose a value in AngularJS using the Chosen directive

I am currently developing a project with AngularJS and I need to display the selected value. To achieve this, I am utilizing the chosen filter available at:

https://github.com/leocaseiro/angular-chosen

Below is the code snippet that I have implemented:

.directive('chooseCustomer', function($timeout) {

  var linker = function(scope, element, attr) {

    scope.$watch('customerInfo', function() {
      $timeout(function() {
        element.trigger('chosen:updated');
      }, 0, false);
    }, true);

    $timeout(function() {
      element.chosen();
    }, 0, false);
  };

  return {
    restrict: 'A',
    link: linker
  };
})

In my controller:

$scope.assCustomers.customerName = companyName //displaying company name here 

In the HTML file:

<select class="selectbox_menulist" required  name="customerName" choose-customer="" ng-options="customer['company-name'] for customer in customerInfo" 
ng-model="assCustomers.customerName" ng-change="getBillingNumber()" ng-disabled="promoAssociation" data-placeholder="Please Select">

Answer №1

The issue lies within the model as the model value is not being properly updated.

.directive('selectCustomer', function($timeout) {

  var linkFunction = function(scope, element, attrs) {
    scope.$watch('selectedCustomer.customerName', function() {
      $timeout(function() {
        element.trigger('chosen:updated');
      }, 0, false);
    }, true);
    
    scope.$watch('customerInfo', function() {
      $timeout(function() {
        element.trigger('chosen:updated');
      }, 0, false);
    }, true);

    $timeout(function() {
      element.chosen();
    }, 0, false);
  };

  return {
    restrict: 'A',
    link: linkFunction
  };
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with NgModule in Angular application build

I'm facing an issue with my Angular application where the compiler is throwing errors during the build process. Here's a snippet of the error messages I'm encountering: ERROR in src/app/list-items/list-items.component.ts:9:14 - error NG6002 ...

Tips for obtaining a specific sorting order based on a wildcard property name

Here's the structure of my JSON object, and I need to sort it based on properties starting with sort_ { "sort_11832": "1", "productsId": [ "11832", "160", "180" ], "sort_160": "0", "sort_180": " ...

What is the reason for my algorithm's inability to work with this specific number?

I'm currently working on creating an algorithm to compute the sum of prime numbers that are less than or equal to a specified number. Below is my attempt: function calculatePrimeSum(num) { // initialize an array with numbers up to the given num let ...

Retrieve the property called "post" using Restangular

With the following code, I am fetching a list of 'postrows': $scope.postrows = {}; Restangular.all('/postrows').getList().then(function(data){ $scope.postrows = data; }); The returned JSON structure is as follows: { id: 1, post ...

Altering content using jQuery

Trying to create a dynamic quiz using HTML, CSS, and jQuery. I am having trouble changing the <p id=question></P> element with jQuery code as nothing happens. Below is my HTML and jQuery code: <!DOCTYPE html> <html lang='es' ...

Is there a way for me to view the names of the images I am uploading on the console?

Recently, I've started using express and NodeJs. I've created a function called upload that is responsible for uploading images. Here is the code: const fs = require("fs"); var UserId = 2; var storage = multer.diskStorage({ destination: functi ...

Issue with formatting and hexadecimal encoding in JavaScript

I am currently developing a LoRaWAN encoder using JavaScript. The data field received looks like this: {“header”: 6,“sunrise”: -30,“sunset”: 30,“lat”: 65.500226,“long”: 24.833547} My task is to encode this data into a hex message. Bel ...

Objects that are not defined in a Gruntfile for a legacy AngularJS project

My old AngularJS (1) application used to start without any issues. However, after updating my dependencies yesterday, I am now encountering an error where the module and require objects are suddenly undefined. // Generated on 2014-10-21 using generator-a ...

Angular is unable to detect the dynamically loaded page when using Extjs

Within my Extjs SPA system, I have integrated Angular along with the necessary modules to be used on a page that is being referred in an external HTML panel in Extjs. While Angular is defined and functioning properly everywhere else, it seems to not work ...

How can I position text in the top right corner of a v-card's v-img component in Vuetify.js?

I am using Vuetify.js and I am trying to show a single word on the right side of an image within a v-card: <v-card> <v-img src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-ratio="2.75"> <span class= ...

Unable to switch the text option

[Fiddle] I'm currently working on a project where I want pairs of buttons to toggle text by matching data attributes. While I can successfully change the text from "Add" to "Remove" on click, I am facing an issue with toggling it back to "Add" on the ...

Having trouble loading HTML content from another file

Here is the code snippet in question: <script> var load = function load_home(){ document.getElementById("content").innerHTML='<object type="type/html" data="/linker/templates/button.html" ></object>'; } </script> ...

Seeking assistance with transferring jQuery to regular JavaScript and installing on the home screen of an Apple device

Dealing with the issue of iPhone "Bookmark to Homescreen" removing cookies and sessions, I have come up with a jQuery solution. Learn more about this problem here. In essence, by using JavaScript to create add to homescreen kit launch links, you can avoi ...

How can I prevent the text from overlapping the lines in a d3 forced graph?

I am currently working with an SVG that contains text positioned in the center of a large circle, connected to two smaller circles by a line. The formula I am using to obtain the line coordinates is as follows: x1={Math.max(radius, Math.min(heigh ...

Customizing filters to easily decode words

I have been utilizing angular-translate for my project to translate words in views using the following method: However, I am facing difficulties with my filter: angular.module('MyModule') .filter('weekdays', function () { r ...

The image fails to display correctly

As I work on creating a basic webpage in HTML and JavaScript, my goal is to validate certain parameters (such as width, height) of an image that users upload via a form. In JavaScript, I extract the file from the form and attempt to display it as an image ...

Mastering the art of chaining promises in Mongoose

I need help figuring out how to properly chain promises for a "find or create" functionality using mongodb/mongoose. So far, I've attempted the following: userSchema.statics.findByFacebookIdOrCreate = function(facebookId, name, email) { var self = ...

Concealing information based on the value of a variable

Creating a dynamic price estimator. I need help writing a jQuery function that can hide or show a specific div element based on the value of a variable. For example, let's say I have an HTML div with the ID 'Answer': <div id="answer"&g ...

JS selection-dropbox

As someone who is relatively new to JS, I am struggling a bit. The goal of the code is to display items with specific content (ALL, A, B, C). While the code works fine with buttons, I can't seem to get it to work with a 'Dropdown-select', ...

What are some strategies for breaking down large components in React?

Picture yourself working on a complex component, with multiple methods to handle a specific task. As you continue developing this component, you may consider refactoring it by breaking it down into smaller parts, resembling molecules composed of atoms (it ...