AngularJS - choosing the ng-model's index value

Question

AngularJS - choosing the ng-model's index value

I'm looking to retrieve the selected item(s) from a select control along with their values or titles. Once the user has made their selections from the dropdown menu, I want to be able to determine the number of items selected and display their titles or values.

Below is a snippet of the HTML code on my page:

<select ng-model="selectedValues" multiple>
            <option >All Booth</option>
            <option> Washroom</option>    
 </select>

 <button ng-click="apply()" type="button>Apply</button>

Here's an example of the code in my controller:

$scope.apply = function () {
// Retrieve the number of selected items and their titles or values

}

Any suggestions on how I can accomplish this? Thank you.

javascript angularjs angularjs-scope

Answer 1

Answer №1

Feel free to test out the demo:

const myApp = angular.module('myApp', [])

myApp.controller('appController', function ($scope) {

    $scope.applyChanges = () => {
        if($scope.selectedValues !== undefined && $scope.selectedValues.length > 0) {
            // Retrieve selected items and their count
            let selectedTitles = $scope.selectedValues; // Get titles or values
            let numberOfSelectedItems = $scope.selectedValues.length; // Get number of selected items

            console.log("Total items selected: " + numberOfSelectedItems + " - Titles: '" + selectedTitles.toString() + "'");
        } else {
            console.log("No item has been selected");
        }
    }

});

<!DOCTYPE html>
<html>

  <head>
    
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
   
  </head>

  <body ng-app="myApp" ng-controller="appController">
     <select ng-model="selectedValues" multiple>
            <option>All Items</option>
            <option>Main Category</option>    
 </select>

 <button ng-click="applyChanges()" type="button">Apply Changes</button>
  </body>

</html>

Answer 2

Feel free to test out the demo:

const myApp = angular.module('myApp', [])

myApp.controller('appController', function ($scope) {

    $scope.applyChanges = () => {
        if($scope.selectedValues !== undefined && $scope.selectedValues.length > 0) {
            // Retrieve selected items and their count
            let selectedTitles = $scope.selectedValues; // Get titles or values
            let numberOfSelectedItems = $scope.selectedValues.length; // Get number of selected items

            console.log("Total items selected: " + numberOfSelectedItems + " - Titles: '" + selectedTitles.toString() + "'");
        } else {
            console.log("No item has been selected");
        }
    }

});

<!DOCTYPE html>
<html>

  <head>
    
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
   
  </head>

  <body ng-app="myApp" ng-controller="appController">
     <select ng-model="selectedValues" multiple>
            <option>All Items</option>
            <option>Main Category</option>    
 </select>

 <button ng-click="applyChanges()" type="button">Apply Changes</button>
  </body>

</html>

Answer 3

Answer №2

Instead of using ng-repeat, consider utilizing the ngOptions attribute when working with the select element in AngularJS. To learn more, visit the ngOptions documentation.

See Below for a Working Demo :

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

myApp.controller('MyCtrl',function($scope) {

    $scope.items = [
    {
      title: 'All Booth',
      value: 'All Booth'
    },
    {
      title: 'Washroom',
      value: 'Washroom'
    }
    ];
    $scope.apply = function(selectedValues) {
        var selectedValuesLength = selectedValues.length;
        console.log(selectedValuesLength); // selected items count
        for(var i in selectedValues) {
            console.log(selectedValues[i]); // selected items title
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <select multiple="true" ng-model="selectedValues" ng-options="item.value as item.title for item in items">
    </select>
    <button ng-click="apply(selectedValues)" type="button">Apply</button>
</div>

Answer 4

Instead of using ng-repeat, consider utilizing the ngOptions attribute when working with the select element in AngularJS. To learn more, visit the ngOptions documentation.

See Below for a Working Demo :

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

myApp.controller('MyCtrl',function($scope) {

    $scope.items = [
    {
      title: 'All Booth',
      value: 'All Booth'
    },
    {
      title: 'Washroom',
      value: 'Washroom'
    }
    ];
    $scope.apply = function(selectedValues) {
        var selectedValuesLength = selectedValues.length;
        console.log(selectedValuesLength); // selected items count
        for(var i in selectedValues) {
            console.log(selectedValues[i]); // selected items title
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <select multiple="true" ng-model="selectedValues" ng-options="item.value as item.title for item in items">
    </select>
    <button ng-click="apply(selectedValues)" type="button">Apply</button>
</div>

AngularJS - choosing the ng-model's index value

Answer №1

Answer №2

Similar questions

Styling Challenges with CSS/AngularJS Accordion in Footer

Obtaining Data from CRM 2011 with the Power of jQuery and JavaScript

Exploring composite search conditions in MongoDB with JavaScript

I'm having trouble with my controller - not sure what the problem is

Creating dynamic <a> tags using JavaScript

Converting JSON data into an array of JavaScript objects

Leverage JavaScript to showcase Django object on the webpage

What is the best way to access an external array using ng-repeat in AngularJS?

A guide to deactivating the Material UI Link API element

Unable to stop submission as a result of ajax verification

What is the method for including the sources directory within the require() scope in npm?

Ways to retrieve information beyond the scope of the 'then' method

Safely transmitting client-side encrypted information between individuals

Using Javascript code within functions.php

Using Material-UI's <Autocomplete/> component and the getOptionLabel prop to handle an empty string value

Storing input data in a JavaScript array instead of sending it through an AJAX request

Unable to access the newly created object's properties following the instantiation of a new resource in AngularJS

Unable to utilize a custom function within JQuery

The routing functionality in Angular4 encounters issues when the `router.navigate()` method is used within the callback of a

Changes to the state will not be reflected until a poll is conducted