Question

我对角度很新，已经遇到了我的第一个问题。我在stackoverflow上寻找了一个解决方案，但没有人和我一样。我想在“选择框”中设置默认文本。就像“选择你的车”一样。但我不知道如何插入此默认文本。我尝试用HTML学习它的方式来解决它。但它没有用，因为我没有任何标签。

P.S。我也尝试了一点MVC。我认为这根本不正确，但在这篇文章中忽略它。

那将是我的代码：

查看 - ＆gt;的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>

型号 - ＆gt; myApp.js

var app = angular.module("myApp", []);

Controll - ＆gt; 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"}
  ];
  })

感谢您的帮助

Answer 1

只需添加其他选项，如下所示

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

Answer 2

您可以手动添加默认选项，如下所示：

<select ng-model="selectedCar" ng-options="x.marke for x in cars">
  <option value="">Please select one</option>
</select>

在Angular中设置默认选择文本

2 个答案: