Question

我似乎无法使用AngularJS为选择下拉列表设置默认值。我已经在StackOverflow上阅读了类似的主题，但没有一个提议的解决方案适合我，所以我决定最终问你们:)：

基本上我想在我的应用程序中实现一个条目编辑功能。因此，用户单击编辑按钮，弹出一个模式，其中包含从传递给模态控制器的对象填充的值的表单。我的意思是所有的值，但我想要作为下拉选择呈现的“类别”。

我认为在代码中展示会更容易，所以我准备了这个小提琴：

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {

  $scope.dataReceived = {
    category: "FOOD"
  }

  $scope.availableCategories = {
    FOOD: "Food and drinks",
    FREE_TIME: "Free time",
    HOUSING: "Housing costs"
  };

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
<div class="form-group">
  <label for="select-category">Select category:</label>
  <select class="form-control" id="select-category" ng-model="dataReceived.category" required>
    <option ng-repeat="(key,value) in availableCategories" ng-value="key">
      {{value}}
    </option>
  </select>
</div>

</div>

我尝试了不同的修复方法，但到目前为止还没有工作，所以请帮忙！如果传递对象的类别是“FOOD”，我想要做的就是下拉菜单默认说“食物和饮料”。干杯！

Answer 1

我认为您应该尝试使用带有键值对的ng-options。

像这样：

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {

  $scope.dataReceived = {
    category: "FOOD"
  }

  $scope.availableCategories = {
    FOOD: "Food and drinks",
    FREE_TIME: "Free time",
    HOUSING: "Housing costs"
  };

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
<div class="form-group">
  <label for="select-category">Select category:</label>
  <select class="form-control" id="select-category" ng-model="dataReceived.category" ng-options="key as value for (key , value) in availableCategories " required>
  </select>
</div>

</div>

希望它有所帮助。

设置angularJS选择默认值

1 个答案: