Angular 使用 ng-model、ng-init、ng-options 和表单集合选择的设置

Question

我正在尝试通过 JSON 调用在 select 元素上动态设置 selected 选项。如果使用此方法选项是静态的，我可以设置它，但对于我来说，在使用 ng-options 或 ng-repeat 填充选项时我无法设置它。这是我的 HTML 一个下拉菜单：

<select class="form-control" id="authQLang" name="authQLang" ng-model="content.languages" ng-options="item as item.name for item in languages track by item.code"  ng-init="content.languages == defaultLang" required>
    <option value="">Select a language</option>

    </select>

我控制器中的代码：

$scope.content = data.data;
    $scope.defaultAcct = data.data.defaultAccount.ID;
    $scope.defaultLang = data.data.defaultLanguage.code;
    $scope.accounts = [];
      angular.forEach(data.data.accounts, function(value, key) {
          $scope.accounts.push(value);
      });
    $scope.languages = [];
      angular.forEach(data.data.languages, function(value, key) {
          $scope.languages.push(value);
      });

和 JSON 格式：

{
"code": 0,
"message": "",
"data": {
    "defaultAccount": {
        "ID": "6481618",
        "name": "Account X"
    },
    "defaultLanguage": {
        "code": "en-US",
        "name": "English US"
    },
    "accounts": [{
        "ID": "6481004",
        "name": " Account A."
    },...
    "languages": [{
        "code": "en-us",
        "name': "English US"
    },...

Answer 1

去掉ng-init，你最好在控制器中设置这个值。从控制器更改它也会更改选择。

<select class="form-control" id="authQLang"
  name="authQLang" ng-model="content.languages"
  ng-options="item as item.name for item in languages track by item.code"
  required>
    <option value="">Select a language</option>
</select>

然后在你的控制器中：

$scope.content = data.data;
$scope.defaultAcct = data.data.defaultAccount.ID;
$scope.defaultLang = data.data.defaultLanguage.code;
$scope.accounts = [];
  angular.forEach(data.data.accounts, function(value, key) {
      $scope.accounts.push(value);
  });
$scope.languages = [];
  angular.forEach(data.data.languages, function(value, key) {
      $scope.languages.push(value);
  });

# add this:
$scope.content.languages = $scope.defaultLang

并在您想要更改选择时随时更新 $scope.content.languages。

哦，您的 ng-init 中有 ==，这会阻止正确设置初始值。

Angular 使用 ng-model、ng-init、ng-options 和表单集合选择的设置

Angular setting selected using ng-model, ng-init, ng-options and form collection

angularjs

ng-options

ng-init