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

Navigating through the complexities of scoping in JavaScript when integrating Node.js

Overlaying content: Innovative dropdown menu design

Axios Instance class request cancellation

typescript in conjunction with nested destructuring

ZK: maintaining session connectivity

AngularJS: implement functionality to trigger action when div is visible

Having trouble getting async and await to function properly

In order to toggle a div property on and off with each click, you will need to use an onclick JavaScript function

The code is triggering IE 8 to switch to compatibility mode resembling IE7

The upload directory in KCFinder can be accessed and selected using a URL

Enhancing JSON data in Datatables with additional text

jQuery DataTable error: Attempted to set property 'destroy' on an undefined object

Preventing data duplication when refreshing a webpage using Node.js

The admin-ajax.php file in WordPress consistently fails to return any value other than

Mirror the input text to another input within a for loop

"Automatically insert a new row into the table if the cell loses focus and is not left

Exploring the intersection of points within an aframe

Exploring the method of creating multiple nested states within various parent components while utilizing identical templates

Build a stopwatch that malfunctions and goes haywire

Using `window.location.href` will terminate any pending asynchronous calls to the API