Question

我有一个HTML＆lt; select＆gt;标签：文档类型＆lt; select class =＆＃34; form-control＆＃34;名称=＆＃34; DOCUMENT_TYPE＆＃34; NG-模型=＆＃34; DOCUMENT_TYPE＆＃34; ng-options =＆＃34;选择opt.label作为选择加入选项＆＃34;所需＆GT; 我在模型范围内保存了一个选项变量： $ scope.options = [{ 标签：＆＃39;＆＃39;，价值：＆＃39;＆＃39; }，{ 标签：＆＃34;身份证＆＃34;，价值：＆＃34;身份证＆＃34; }，{ 标签：＆＃39; Passport＆＃39;，价值：＆＃39; Passport＆＃39; }，{ 标签：＆＃39;驾驶执照＆＃39;，价值：＆＃39;驾驶执照＆＃39; }]; 通过这种方式，我有以下字段：我的目标是设置document_type＆＃39;变量＆＃39;使用$ scope： $ scope.document_type =＆＃34; Passport＆＃34; 但它不起作用和＆lt; select＆gt;字段保持空白。

Answer 1

检查以下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);
   }

Answer 2

试试以下

<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/

Answer 3

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

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

＆＃13;

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";
});

＆＃13;

<!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>

＆＃13;

Answer 4

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

 $scope.$apply() ;

试试这个。

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

4 个答案: