使用$範圍設置一個<select> HTML標籤 - AngularJS

我有一個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' 
        } ];

這樣我有以下字段：

我的目標是設置document_type「變量」使用$scope：

$scope.document_type = "Passport"

，但它不工作和<select>領域保持空白。

來源

2016-07-05 DistribuzioneGaussiana

是已知的和有限的文檔類型的數量？ – FDavidov

是的。在我的照片中只有三種選擇可以看到。 – DistribuzioneGaussiana

看到我剛剛發佈的解決方案。 – FDavidov

你的選擇實際上是設置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="[email protected]" 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>

來源

2016-07-05 10:12:55 Claies

根據你進行此項分配的情況下，你可能需要經過它包括以下調用：

$scope.$apply() ;

試試這個。

來源

2016-07-05 09:43:34 FDavidov

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

來源

2016-07-05 09:49:20

試試以下

<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選項。如果您設置了適當的格式數據，它將被選中。

http://jsfiddle.net/svpjgm8s/

來源

2016-07-05 09:52:32

使用$範圍設置一個<select> HTML標籤 - AngularJS

回答

相關問題