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

Implement Conditional Enabling of Forms in JavaScript or jQuery to Support Single Form Usage

Unable to update to the most recent version of React-Bootstrap

The Highcharts plugin is currently not able to render the data

Tips for preventing a promise from being executed more than once within an observable while being subscribed to a BehaviorSubject

What is the best way to store XHR data in a browser's cache?

Looking to display information in a column-by-column format using ng-grid within Angular JS

"Unlock the secret to effortlessly redirecting users to a designated page when they click the browser's back

Enhance JSON nesting with knockoutJS

Cleaning up HTML5 video content

Using default JavaScriptSerializer to bind DateTime to knockout view model

Tips for rendering nested objects and arrays within Angular 2

Exploring Nodejs and delving into fundamental queries

What is the best way to display ng-repeat elements in a horizontal layout

Does an invisible property value exist?

Transform the blob data into an Excel file for easy download, but beware the file is not accessible

Implementing Shader Effects around Mouse using Three.js

Utilize vue.js input field to search for a specific username within a constantly updating list of users

Scrolling triggers the click event

Experiencing continual issues with login authentication on node.js and Express.js due to invalid credentials

What is the process for transferring an object to a different file?