angularjs - select's ng-model index

Question

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.


Show source
| javascript   | angularjs   | angularjs-scope   2017-01-03 08:01 2 Answers

Answers to angularjs - select&#39;s ng-model index ( 2 )

  1. 2017-01-03 08:01

    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>

  2. 2017-01-03 09:01

    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>

Leave a reply to - angularjs - select's ng-model index

◀ Go back