如何在Angular JS的选择选项中获取选定的项目ID

Question

In the following code update function is not getting the proper ID passed it.

How to get the proper is in angularJS for selected option.

<select 
    ng-model="selectedCategory" 
    size="10" 
    ng-options="category.id as category.name for category in Categories | orderBy:'name'" 
    ng-change="update(Categories[selectedCategory-1].id)">
</select>

Answer 1

Since you already have selectedCategory in your view, just do this

<select 
    ng-model="selectedCategory" 
    size="10" 
    ng-options="category.id as category.name for category in Categories | orderBy:'name'" 
    ng-change="update(selectedCategory)">
</select>

 $scope.update= function (category) {
       $scope.CategoryID = category.id;
    };

Here is the working plnker

Answer 2

selectedCategory can be accessed inside update function:

<select 
    ng-model="selectedCategory" 
    size="10" 
    ng-options="category.id as category.name for category in Categories | orderBy:'name'" 
    ng-change="update(selectedCategory)">
</select>

$scope.update= function () {
    console.log($scope.selectedCategory); //this is selected cotegory id
};

Answer 3

try like this sample data

$scope.selectCustName = {
        availableOptions: [
                           {id: '0', name: 'All'},
                           {id: '1', name: 'Option A'},
                           {id: '2', name: 'Option B'},
                           {id: '3', name: 'Option C'}
                         ],
       selectedOption: {id: '0', name: 'All'} //This sets the default value of the select in the ui
};

in html code

<select name="" id="" class="form-control form-custome" 
    ng-options="option.name for option in selectCustName.availableOptions track by option.id"
    ng-model="selectCustName.selectedOption">
</select>

<p>your selected {{ selectCustName.selectedOption }}</p>