使用 $scope 设置 <select> HTML 标记 - AngularJS答案

【问题标题】：Set a <select> HTML tag using $scope - AngularJS使用 $scope 设置 <select> HTML 标记 - AngularJS
【发布时间】：2016-07-05 18:12:55
【问题描述】：

我有一个 HTML <select> 标签：

Document type <select class="form-control" name="document_type" ng-model="document_type"
                            ng-options="opt as opt.label for opt in options" required>

我在我的模型范围内保存了一个options 变量：

$scope.options = [{
                        label : '',
                        value : ''
                    },  {
                        label : "ID card",
                        value : "ID card"
                    }, {
                        label : 'Passport',
                        value : 'Passport'
                    }, {
                        label : 'Driving license',
                        value : 'Driving license'
                    } ];

这样我就有了以下字段：

我的目标是使用$scope 设置document_type“变量”：

$scope.document_type = "Passport"

但它不起作用，<select> 字段保持空白。

【问题讨论】：

文档类型的数量是否已知且有限？
是的。我的图片中只有三个选项。
查看我刚刚发布的解决方案。

标签： html angularjs angularjs-scope

【解决方案1】：

您的选择实际上是将document_type 设置为具有label 和value 属性的对象，但您试图将默认值分配为字符串。

如果您希望 document_type 成为字符串而不是对象，则应稍微更改您的 ng-options 子句。而不是opt as opt.label ... 使用opt.value as opt.label ...

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

app.controller('MainCtrl', function($scope) {
  $scope.options = [{
    label: '',
    value: ''
  }, {
    label: "ID card",
    value: "ID card"
  }, {
    label: 'Passport',
    value: 'Passport'
  }, {
    label: 'Driving license',
    value: 'Driving license'
  }];
  
  $scope.document_type="Passport";
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  Document type
  <select class="form-control" name="document_type" ng-model="document_type" 
          ng-options="opt.value as opt.label for opt in options" required></select>
</body>

</html>

【讨论】：

【解决方案2】：

检查以下 plunkr..

https://plnkr.co/edit/CLue567fPpxp5gXMobcP?p=preview

<select class="form-control" name="document_type" ng-model="document_type"
                            ng-options="opt as opt.label for opt in options" ng-change="func()"  required></select>

$scope.func=function(){
     alert($scope.document_type.value);
   }

【讨论】：

【解决方案3】：

试试下面的

<select class="form-control" ng-model="document_type" 
   ng-options="opt as opt.label for opt in options">
</select>

<div>{{ document_type }}</div>

 $scope.options = [{
    label: '',
    value: ''
  }, {
    label: "ID card",
    value: "ID card"
  }, {
    label: 'Passport',
    value: 'Passport'
  }, {
    label: 'Driving license',
    value: 'Driving license'
  }];

  $scope.document_type = $scope.options[2];

在您的问题中，您将文本设置为您选择的选项，但在您的实际实现中，您将 JSON 格式的数据添加为 ng-option。如果您设置了正确的格式数据，它将被选中。

http://jsfiddle.net/svpjgm8s/

【讨论】：

【解决方案4】：

根据您进行此分配的上下文，您可能需要在其后包含以下调用：

 $scope.$apply() ;

试试这个。

【讨论】：