Angular's reusable select component exhibits unique behavior when dynamically populating its options through AJAX requests

Question

Angular's reusable select component exhibits unique behavior when dynamically populating its options through AJAX requests

I have a question about creating a reusable select input that displays a 'Charging ...' message while waiting for options to load via an ajax request. Is there a way to achieve this using a directive like 'ajax-charged'?

For example, I would like to use the following HTML in my views:

<select ng-options="opt in options" ajax-charged>
<option>Charging ... </option>
</select>

Once the options are loaded, the HTML would become:

<select ng-options="opt in options" ajax-charged>
<option>opt1</option>
<option>opt2</option>
<option>etc</option>
</select>

I'm considering changing the options array to include only a 'Charging ...' item, but I am open to other suggestions for achieving reusability. Any ideas?

javascript ajax angularjs angularjs-directive code-reuse

Answer 1

Answer №1

In order for your directive to function properly, it must be aware of which array it is monitoring. You can provide this information to the directive and set it up to watch over the specified array.

If you want to see an example of this in action, feel free to check out the demonstration I've created on JSFiddle: http://jsfiddle.net/TMVFN/1/

Here's a snippet of the HTML code:

  </select>
  <select ng-model="selectedA" ng-options="optA for optA in optionsA" ajax-charged="optionsA">

  </select>

{{selectedA}}, {{selectedB}}
</div>

And here's the corresponding JavaScript code:

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope, $timeout) {
    $timeout(function(){
        $scope.optionsA = ['opt1', 'opt2', 'etc'];
        $scope.optionsB = ['opt4', 'opt5'];
    }, 3000);
    $scope.optionsB = ['opt3'];
    $scope.selectedB = 'opt3';
};

myApp.directive('ajaxCharged', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function($scope, elm, attrs, ngModel) {            
            $scope.$watch(attrs.ajaxCharged, function(newVal, oldVal) {
                console.log(newVal);
                if (typeof(newVal) === 'undefined' ||
                    typeof(newVal.length) === 'undefined' || 
                    newVal.length === 0) {
                    $scope[attrs.ajaxCharged] = ['Charging...'];
                } else if (newVal !== oldVal && newVal.length > 0) {
                    ngModel.$setViewValue(newVal[0]);
                }
            }, true);
        }
    };
});

Answer 2

In order for your directive to function properly, it must be aware of which array it is monitoring. You can provide this information to the directive and set it up to watch over the specified array.

If you want to see an example of this in action, feel free to check out the demonstration I've created on JSFiddle: http://jsfiddle.net/TMVFN/1/

Here's a snippet of the HTML code:

  </select>
  <select ng-model="selectedA" ng-options="optA for optA in optionsA" ajax-charged="optionsA">

  </select>

{{selectedA}}, {{selectedB}}
</div>

And here's the corresponding JavaScript code:

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope, $timeout) {
    $timeout(function(){
        $scope.optionsA = ['opt1', 'opt2', 'etc'];
        $scope.optionsB = ['opt4', 'opt5'];
    }, 3000);
    $scope.optionsB = ['opt3'];
    $scope.selectedB = 'opt3';
};

myApp.directive('ajaxCharged', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function($scope, elm, attrs, ngModel) {            
            $scope.$watch(attrs.ajaxCharged, function(newVal, oldVal) {
                console.log(newVal);
                if (typeof(newVal) === 'undefined' ||
                    typeof(newVal.length) === 'undefined' || 
                    newVal.length === 0) {
                    $scope[attrs.ajaxCharged] = ['Charging...'];
                } else if (newVal !== oldVal && newVal.length > 0) {
                    ngModel.$setViewValue(newVal[0]);
                }
            }, true);
        }
    };
});

Angular's reusable select component exhibits unique behavior when dynamically populating its options through AJAX requests

Answer №1

Similar questions

Retrieve session using id from an ajax request

"Ensure Playwright refreshes the page automatically following navigation when a specific status code is

Synchronize information between mongoDB and firebase bidirectionally

Issue with Chrome Extension in Selenium JavaScript WebDriver Test

modify div heights according to screen resolutions and quantity of elements

Use JavaScript to access the dynamic checkboxes in an ASP table by utilizing the functions checkall, uncheck, and middlestate

Obtain information stored locally when an internet connection is established

What could be causing the incorrect display of updates when my Grails checkbox onclick remote function Ajax call is triggered

NestJS Logger: Issue setting logger types in main.ts

Locate the class ID and refine the search results by another class

What are the security risks of evaluating user-supplied strings in web browser storage?

Converting a JSON array to C# and vice versa in Xamarin Forms

Transition smoothly with a fade-in effect as you scroll through the images, and proceed to

Struggling with making jQuery match elements' heights

What is the reason for the hotel's Object _id not being saved in MongoDB?

Recording a specialized event sent from a web component to React

The problem with Ajax NSURLCache persists and continues to receive an undefined response

Ways to extract a value from an HTML form in ASP.NET when using Html.EnumDropDownListFor

What is the best way to create custom shapes using an array of points in the xyz coordinates system with THREE.JS?

Populating the view value of an input field within a unit test for an angular form directive