CODEWITHSUNDEEP
angularjsng-options
Nikola
Nikola

Reputation: 15038

How to get the text of the selected option(s) in angular using ng-options

My code is here in jsFiddle, and below is the c/p of that code. My question is how to get just the text Mon and not ["Mon"] when I click on the Monday option, and also how to get Mon, Thu when I multi-select Monday and Thursday (ofc, you get the point: Tue, Wed, Sat when Tuesday, Wednesday and Saturday options are selected). I must be missing something obvious so please steer me in the right direction.

html:

 <div ng-app ng-controller="Controller">
    <select multiple="multiple" ng-model="day" ng-options='day.id as day.name for day in days'></select>

    {{day}}
</div>

js:

function Controller($scope) {
    $scope.days = [
        {
            name: "Monday",
            id: "Mon"
        },
        {
            name: "Tuesday",
            id: "Tue"
        },
        {
            name: "Wednesday",
            id: "Wed"
        },
        {
            name: "Thursday",
            id: "Thu"
        },
        {
            name: "Friday",
            id: "Fri"
        },
        {
            name: "Saturday",
            id: "Sat"
        },
        {
            name: "Sunday",
            id: "Sun"
        }
    ];    
}

Upvotes: 0

Views: 1351

Answers (1)

JB Nizet
JB Nizet

Reputation: 691715

Here's an example that transforms the array to a String and displays it as a string directly in the page:

JS:

$scope.selectedDaysToString = function() {
    return $scope.day.join(', ');
}

HTML:

{{selectedDaysToString()}}

And here is an example that generates a list containing all the selected days:

HTML:

<ul>
    <li ng-repeat="d in day">{{d}}</li>
</ul>

Upvotes: 1

Related Questions