Angular -js：ng-model不適用於可搜索的下拉菜單

Question

我已經使用此庫（ https://select2.github.io/ ）實現了可搜索的下拉列表，其工作正常，但單擊按鈕時我無法獲得ng-model值。

 <select ng-model="destination_name" class="js-example-basic-single form-control" >
                         <option selected disabled>Choose</option>
                         <?php foreach ($all_dest as $value): ?>
                             <option value="<?=$value->id?>"><?=$value->destination_name?></option>
                          <?php endforeach; ?>
                     </select>
<input type="button" ng-click="addDest(destination_name)" value="{{btnTxt}}" name="add" class="btn btn-primary pull-right"/>

jQuery的可搜索下拉菜單

 $(document).ready(function() {
        $(".js-example-basic-single").select2();
    });

Angular JS代碼

$scope.addDest=function (value) {
        alert(value);

}

這里的addDest是在單擊按鈕時在下拉菜單中傳遞所選值的函數，即使選擇了某個項目，我也將undefined 。

注意

當我隱藏jquery部分時，它提供了可搜索的下拉菜單，我將獲得ng-model值。 我認為這是jquery部分的問題。

Answer 1

最佳解決方案-使用https://github.com/angular-ui/ui-select代替您的選擇。

下一個解決方案-編寫wrapper指令，並通過select via同步作用域

$scope.$apply();

在select2更改事件上；