CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
Hardyanto Putra Antony. K
Hardyanto Putra Antony. K

Reputation: 577

angularjs - select's ng-model index

I am trying to get all the selected item(s), e.g its value or title, in a select control. Basically, after user has selected the item(s) he/she wants from the select control, I want to get the number of selected items and its title or value.

In my html page, I have the following code snippet:

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

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

In my controller, I have the following code snippet:

$scope.apply = function () {
// Get the number of selected items and its title or value


}

Does anyone know a way I could achieve this? Thanks.

Upvotes: 2

Views: 256

Answers (2)

J-Mean
J-Mean

Reputation: 1200

Please check demo:

angular.module('app', [])

.controller('appCtrl', function ($scope) {

    $scope.apply = function () {
        if ($scope.selectedValues != undefined && $scope.selectedValues.length > 0) {
            // Get the number of selected items and its title or value
            var selectedTitles = $scope.selectedValues;//Get title or value
            var noSelectedItems = $scope.selectedValues.length;//Get the number of selected items

            console.log("Total items selected :" + noSelectedItems + " titles '" + selectedTitles.toString() + "'");
        }
        else {
            console.log("No item selected");
        }
    }

});
<!DOCTYPE html>
<html>

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

  <body ng-app="app" ng-controller="appCtrl">
     <select ng-model="selectedValues" multiple>
            <option>All Booth</option>
            <option>Washroom</option>    
 </select>

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

</html>

Upvotes: 1

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

Use ngOptions attribute if dealing with select element in angularjs instead of ng-repeat. For more information click here for the ngOptions documentation.

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>

Upvotes: 0

Related Questions