如何从angular的下拉列表中获取值？

Question

I am trying to get the value that user selects from my dropdown. I have

<select ng-model="item" ng-change="vm.getItem()">
  <option value="discount">Discount</option>
  <option value="{{::item}}"
          ng-repeat="item in vm.items"
          ng-bind="item.name"
  </option>
  </select>

In my controller

vm.getItem = function() {
    vm.pickedItem = //not sure what to do...
    //I need to get the select item 
    //please noted that the discount is a stand alone option value. I need to get     
    //that too if user selects it.
}

I don't want to use ng-option as it has some restriction that I don't need. I was hoping to get it from just regular <option> tag. Thanks for the help!

Answer 1

I would recommend you to use ngOptions

Set up select element with proper model ie vm.pickedItem which can be directly used in controller, or you can pass it to your method like vm.getItem(vm.pickedItem)

<select ng-model="vm.pickedItem" ng-change="vm.getItem(vm.pickedItem )">
    <option value="discount">Discount</option>
    <option value="{{::item}}"
          ng-repeat="item in vm.items"
          ng-bind="item.name">
    </option>
</select>

Answer 2

vm.getItem = function() {
    var selectedItem = vm.item; 
    ////vm.item is the bound variable to the dropdown's ng-model directive
}

If you really wanted to use the ng-change event in this scenario, then on your "getItem" event, you should access the model bound to the dropdown's ng-model called "item" as seen in your html markup.

Answer 3

you forgetting to alis your controller in your select

<select ng-model="vm.item" ng-change="vm.getItem()">

In controller

vm.getItem = function() {
    console.log(vm.item)
   or
   console.log(this.item)
}