我对 Angular 还很陌生,并且已经遇到了我的第一个问题。我在 stackoverflow 上寻找解决方案,但没有人遇到与我相同的情况。我想在我的“选择框”中设置默认文本。就像“选择你的车”之类的东西。但我不知道如何插入这个默认文本。我尝试用我在 HTML 中学到的方式来解决它。但它不起作用,因为我没有任何标签。
附:我还尝试了一点 MVC。我认为它根本不正确,但在这篇文章中忽略它。
这就是我的代码:
查看 -> index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedCar" ng-options="x.marke for x in cars">
</select>
<h1>You selected: {{selectedCar.marke}}</h1>
<h1>The color is: {{selectedCar.farbe}}</h1>
</div>
<script src="./JS/myApp.js"></script>
<script src="./JS/myCtrl.js"></script>
</body>
</html>
模型 -> myApp.js
var app = angular.module("myApp", []);
控制 -> myCtrl.js
app.controller("myCtrl", function($scope){
$scope.cars = [
{marke: "Lamborghini", farbe: "Gelb"},
{marke: "Bugatti", farbe: "Schwarz"},
{marke: "BMW", farbe: "Blau"},
{marke: "VW", farbe: "Grau"}
];
})
感谢您的帮助
最佳答案
只需添加另一个选项,如下所示,
<select ng-model="selectedCar" ng-options="x.marke for x in cars">
<option value="">-- Choose your car --</option>
</select>
演示
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope){
$scope.cars = [
{marke: "Lamborghini", farbe: "Gelb"},
{marke: "Bugatti", farbe: "Schwarz"},
{marke: "BMW", farbe: "Blau"},
{marke: "VW", farbe: "Grau"}
];
})
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedCar" ng-options="x.marke for x in cars">
<option value="">-- Choose your car --</option>
</select>
<h1>You selected: {{selectedCar.marke}}</h1>
<h1>The color is: {{selectedCar.farbe}}</h1>
</div>
</body>
</html>
关于javascript - 在 Angular 中设置默认选择文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46828575/