使用 AngularJS 填充下拉列表答案

【问题标题】：Populating a dropdownlist with AngularJS使用 AngularJS 填充下拉列表
【发布时间】：2018-05-27 17:20:01
【问题描述】：

我想用我创建的名为 Venues 的表中的值填充下拉列表。此表中只有两个内容，Venue Id 和 Name。

我从包含表场地的数据库创建了一个 Code First 实体数据模型，并在我的控制器中创建了这个方法：

public JsonResult GetVenues()
    {
        using (ReservationsModel dc = new ReservationsModel())
        {
            var v = dc.Venues.OrderBy(a => a.Name).ToList();
            return new JsonResult { Data = v, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }

然后在我的脚本中添加：

$scope.selectedVenue = null;
$scope.venues = [];
$http.get("/home/getvenues").success(function (data) {
    angular.forEach(data, function (item) {
        venues.push(item.Name);
    });
    $scope.list = venues;
}).error(function (status) {
    alert(status);
});

$scope.selectedVenue = $scope.venues[i].Name;

在我看来，我有：

<select ng-model="selectedVenue" ng-options="item in venues">
    <option value="">-- Select Venue --</option>
</select>

我来自这些指南：

http://www.dotnetawesome.com/2016/04/implement-event-scheduler-calendar-angularjs.html

How can I populate a select dropdown list from a JSON feed with AngularJS?

https://jsfiddle.net/pravinmagar/Ljgk8oy0/

【问题讨论】：

标签： angularjs asp.net-mvc drop-down-menu

【解决方案1】：

让我们看看你的代码。（检查 cmets）

$scope.selectedVenue = null;
$scope.venues = [];
$http.get("/home/getvenues").success(function (data) {
    angular.forEach(data, function (item) {
        // this should be $scope.venues, not just venues
        venues.push(item.Name);
    });
    // you don't need another scope variable
    $scope.list = venues;
}).error(function (status) {
    alert(status);
});
// as $scope.venues is an array of Names, $scope.selectedVenue = $scope.venues[i] is enough
$scope.selectedVenue = $scope.venues[i].Name;

所以，

$scope.venues = [];
$http.get("/home/getvenues").success(function (data) {
  angular.forEach(data, function (item) {
    $scope.venues.push(item.Name);
  });
}).error(function (status) {
  alert(status);
});
// if i has declared a value somewhere in your code, then
$scope.selectedVenue = $scope.venues[i];

在模板中，

<select ng-model="selectedVenue">
  <option value="">Select Venue</option>
  <option ng-repeat="venue in venues" ng-value="venue">{{venue}}</option>
</select>

【讨论】：

谢谢 ..我实施了更改 >A
哦，哈哈，我很抱歉..我愚蠢地从我的控制器中注释掉了我的 getvenues 方法，我忘记了它facepalm它现在正在工作>AA

【解决方案2】：

你的html部分没问题，只需要在控制器JS中进行以下修改：

在推送时访问$scope.venues 等场所
在.success 中指定默认选择，因为http.get() is async。

代码：

$scope.selectedVenue = null;
$scope.venues = [];
$http.get("/home/getvenues").success(function (data) {
    angular.forEach(data, function (item) {
        $scope.venues.push(item.Name);
    });
    $scope.selectedVenue = $scope.venues[i].Name; // i must be declared in your js
}).error(function (status) {
    alert(status);
});

【讨论】：