如何在Angular JS的選擇選項中獲取選定的項目ID

Question

在以下代碼中，更新功能未獲得正確的ID。

如何獲得正確的選項是在angularJS中。

<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

由於您已經在視圖中選擇了類別，因此只需執行此操作

<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;
    };

這是工作plnker

Answer 2

可以在更新函數中訪問selectedCategory ：

<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

嘗試像這樣的樣本數據

$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
};

在html代碼中

<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>