Heim > Artikel > Web-Frontend > Detaillierte Einführung in die erweiterte Verwendung von Dropdown-Boxen in AngularJS

Detaillierte Einführung in die erweiterte Verwendung von Dropdown-Boxen in AngularJS

黄舟Original: 2017-10-11 10:57:581520Durchsuche

In diesem Artikel wird hauptsächlich die erweiterte Verwendung von Dropdown-Boxen in AngularJS vorgestellt. Er analysiert die Durchlauf-, Auswahl-, Bindungs- und Anzeigefunktionen von AngularJS-Dropdown-Boxen in Form von Beispielen

Die Beispiele in diesem Artikel beschreiben die erweiterte Verwendung von Dropdown-Boxen in AngularJS. Teilen Sie es wie folgt als Referenz mit allen:

HTML-Text:

<body ng-app="myApp">
<!-- 对象内部属性遍历：x--key y---value -->
<p ng-controller="myctr01">
{{sites}}<br>
<select ng-model="site" ng-options="x for (x, y) in sites"></select>
选择的网址：<span>{{site}}</span>
</p>
<p ng-controller="myCtrl">
<p>选择一辆车:</p>
<!-- 这里y标识成员元素对象，并且使用该对象的brand属性作为显示文本,select的值与y绑定 -->
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>
<p>你选择的是: {{selectedCar.brand}}</p>
<p>型号为: {{selectedCar.model}}</p>
<p>颜色为: {{selectedCar.color}}</p>
<p>下拉列表中的选项也可以是对象的属性。</p>
</p>

Javascript-Operationscode :

var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
  //复杂对象
  $scope.cars = {
  car01 : {brand : "Ford", model : "Mustang", color : "red"},
  car02 : {brand : "Fiat", model : "500", color : "white"},
  car03 : {brand : "Volvo", model : "XC90", color : "black"} }
  //简单对象
  $scope.sites = {
      site01 : "Google",
      site02 : "Baidu",
      site03 : "Taobao"
   };
});
app.controller("myctr01",function($scope){
  $scope.sites = {
      site01 : "Google",
      site02 : "Baidu",
      site03 : "Taobao"
  };
});

Wirkung:

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die erweiterte Verwendung von Dropdown-Boxen in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Node.js-Code-Case-Sharing für den Betrieb von MongoDBNächster Artikel：Node.js-Code-Case-Sharing für den Betrieb von MongoDB

In Verbindung stehende Artikel

Mehr sehen