CODEWITHSUNDEEP
angularjsmodel-view-controllerionic-framework
Ecko123
Ecko123

Reputation: 308

How to select multiple selected value from select option

My controller code looks like 

$scope.items = [{
    heading: 'Sports',
    types: [{
        name: 'Football',
    }, {
        name: 'Persie',
    }, {
        name: 'Ronaldo',
    }, {
        name: 'Messy',
    }],
    id: '1'
}, {
    heading: 'Cricket',
    types: [{
        name: 'Tendulkar',
    }, {
        name: 'Lara',
    }, {
        name: 'Ponting',
    }],
    id: '2'
}];

My view contains something like this : How can I get the selected values of options when user clicks submit button

Upvotes: 1

Views: 1437

Answers (1)

michelem
michelem

Reputation: 14590

Here is the jsfiddle I used ng-repeat to build the select and ng-options to fill them, you then have to use the relative ng-model to get the selections.

HTML:

<div ng-app ng-controller="MyCtrl">
  <select class="select fancy" ng-repeat="(i, item) in items" ng-model="searchOption[i]" ng-options="type.name for type in item.types"></select>
  <button ng-click="submitIt()">Submit</button>
</div>

Javascript:

function MyCtrl($scope) {
    $scope.submitIt = function () {
        console.log($scope.searchOption);
    };

    $scope.searchOption = [];

    $scope.items = [{
            heading: 'Sports',
            types: [{
                name: 'Football',
    }, {
                name: 'Persie',
    }, {
                name: 'Ronaldo',
    }, {
                name: 'Messy',
    }],
            id: '1'
  }, {
            heading: 'Cricket',
            types: [{
                name: 'Tendulkar',
    }, {
                name: 'Lara',
    }, {
                name: 'Ponting',
    }],
            id: '2'
  }];
}

Upvotes: 2

Related Questions