如何使用angularjs从下拉列表中获取值

Question

我用来自后端的数据填充了一个选择框并且它运行良好，但是当我单击一个项目以获取它的值时，它给我未定义：

 <div class="col-md-5">
  <label class="child-label" for="existing-phases">Existing:&nbsp;&nbsp;</label>
  <select class="form-control" ng-model="MyData">
    <option disabled selected value>-- select an option --</option>
    <option ng-repeat="var in payloadSecteur" value="{{var.id}}">{{ var.secteur }}
    </option>
  </select>
  <a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>
</div>

这是功能：

 $scope.showPopup=function(){
  alert('eee');
  alert($scope.MyData);
};

原文由 user7035864 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是您的代码的工作片段，没有在选项标签中设置 value 属性并且选项已被硬编码，它工作完美

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <label class="child-label" for="existing-phases">Existing:&nbsp;&nbsp;</label>
  <select class="form-control" ng-model="MyData">
    <option disabled selected value>-- select an option --</option>
    <option>heldfd</option>
    <option>asdf</option>
    <option>asdf</option>
    <option>asdf</option>
  </select>
  <a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showPopup=function(){
  alert($scope.MyData);
};
});
</script>

原文由 GraveyardQueen 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

<div ng-controller="MyCtrl">

    <div class="col-md-5">

        <label class="child-label" for="existing-phases">Existing:&nbsp;&nbsp;</label>

        <select class="form-control" ng-model="MyData" ng-options="payloadSecteur for payloadSecteur in payloadSecteur"></select>

        <a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>

    </div>

</div>

---

 var myApp = angular.module('myApp', []);

function MyCtrl($scope) {

  $scope.payloadSecteur = ['one', 'two', 'three', 'four'];

  $scope.showPopup = function() {
    console.log('eee');
    console.log($scope.MyData);
  };

}

JSFiddle

原文由 ksav 发布，翻译遵循 CC BY-SA 3.0 许可协议