javascript - 设置angularJS选择默认值

Question

我似乎无法使用 AngularJS 为选择下拉菜单设置默认值。我在 StackOverflow 上阅读过类似的主题，但没有一个建议的解决方案对我有用，所以我决定最后问问你们 :)

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

我认为用代码显示会更容易，所以我准备了这个 fiddle :

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>

我尝试了不同的修复方法，但到目前为止都没有奏效，所以请帮忙!如果传递的对象类别是“食物”，我只想让下拉菜单默认显示“食物和饮料”。 干杯!

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>

希望对您有所帮助。