Problem with AngularJS Multiselect checkbox dropdown configuration

Question

Problem with AngularJS Multiselect checkbox dropdown configuration

In my application, I have a pop-up that includes a multi-select dropdown menu.

Here is the code for the Multi-Select Dropdown:

<select name="edit_tags" class="form-control" id="advisor_article_tagsx" multiple="" 
   required ng-model="article_selected" ng-options="article_service as article_service.name for article_service in article_services">
</select>

The article_services array is used in the multi-select dropdown, and it is fetched using the following code:

$http.get(url + 'service_provided').
     then(function (response) {
         $scope.article_services = response.data.service_provided;
});

When clicking on the Edit Button with

ng-click="advisor_article_edit()"

, I want the pop-up to open with some pre-selected checkboxes in the multi-select dropdown. However, despite trying to set the selection in the function below, it does not work as expected:

$scope.advisor_article_edit = function () {
        // This should set the selection but it doesn't.
        $scope.article_selected = [$scope.article_services[3]];
 }

javascript angularjs

Answer 1

Answer №1

Everything seems to be functioning properly, just like in the code snippet below:

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  $scope.cars = [{id:1, name: 'Audi'}, {id:2, name: 'BMW'}, {id:1, name: 'Honda'}];
  $scope.advisor_article_edit = function () {
        $scope.article_selected = [$scope.cars[1]];
  }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select name="edit_tags" class="form-control" id="advisor_article_tagsx" multiple="" 
   required ng-model="article_selected" ng-options="car as car.name for car in cars">
</select>

<button ng-click="advisor_article_edit()">Edit</button><br>
Selected : {{article_selected}}
</div>

Access the Working Plunkar Link here

Answer 2

Everything seems to be functioning properly, just like in the code snippet below:

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

  $scope.cars = [{id:1, name: 'Audi'}, {id:2, name: 'BMW'}, {id:1, name: 'Honda'}];
  $scope.advisor_article_edit = function () {
        $scope.article_selected = [$scope.cars[1]];
  }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select name="edit_tags" class="form-control" id="advisor_article_tagsx" multiple="" 
   required ng-model="article_selected" ng-options="car as car.name for car in cars">
</select>

<button ng-click="advisor_article_edit()">Edit</button><br>
Selected : {{article_selected}}
</div>

Access the Working Plunkar Link here

Answer 3

Answer №2

It is my belief that the click event needs to be activated by an external trigger:

let element = $document.find('some-selector');
element.triggerHandler('click');

To maintain best practices, this action should be implemented within a directive due to its direct manipulation of the DOM.

Answer 4

It is my belief that the click event needs to be activated by an external trigger:

let element = $document.find('some-selector');
element.triggerHandler('click');

To maintain best practices, this action should be implemented within a directive due to its direct manipulation of the DOM.

Problem with AngularJS Multiselect checkbox dropdown configuration

Answer №1

Answer №2

Similar questions

Tips for transferring information from an express rendering to a Vue component?

Retrieve item from sessionStorage Cart

Breaking down a number using JavaScript

Using Angular to fetch API response and convert it into a promise

The steps to properly load "child.vue" into the correct position within "parent.vue" are as follows

Having difficulty retaining the value of a variable following the retrieval of JSON data

Combining PageObjects with non-angular pages: is it possible?

What is the best way to create a new row at a specific index in an ng-repeat loop?

Utilizing TypeScript interfaces to infer React child props

Executing a function in Angular using ng-init

Is it possible to modify the colors within a JavaScript string?

What could possibly be causing a syntax error in my JavaScript code?

How come I don't have to specify the relative path in my HTML file to include a JavaScript file when using Express JS?

Having trouble with Angular UI Select functionality?

What could be the reason for my ajax request coming back with no data?

Error in Angular Due to Circular Reference in JSON

Using jQuery to loop through a table and retrieve the button value from every row

Steps to create a typewriter effect using a collection of words

Scroll to the end of the main div's horizontal position instead of using offset().left

Creating a smooth animated scroll to a specific #hash while keeping elements hidden on the page