[英]Using <select> and <option> in AngularJS
我有這個錨標記,我根據來自對象的日期更改我的視圖。 我正在嘗試將其更改為選擇選項,但它不能像我這樣做。
這是錨標記語法:
<a href="#" ng-repeat="item in home.prData" ng-click="home.selectedPr = item; $event.preventDefault();
$event.stopPropagation();">{{item.date}}</a>
當我使用select選項時,我試圖改變它
<select st-search="{{item.date}}" class="show-tick form-control dropdown_custom_list">
<option value="">- select a date -</option>
<option ng-repeat="item in home.prData" value="{{home.selectedPr = item}}">{{item.date}}
</option>
</select>
我創建了一個示例plunkr到我想要實現的目標:
請參閱AngularJS select Directive API Reference - 使用ngRepeat
生成select
選項
angular.module('ngrepeatSelect', []) .controller('ExampleController', ['$scope', function($scope) { $scope.data = { model: null, availableOptions: [ {id: '1', name: 'Option A'}, {id: '2', name: 'Option B'}, {id: '3', name: 'Option C'} ] }; }]);
<script src="//unpkg.com/angular/angular.js"></script> <body ng-app="ngrepeatSelect"> <div ng-controller="ExampleController"> <form name="myForm"> <label for="repeatSelect"> Repeat select: </label> <select name="repeatSelect" id="repeatSelect" ng-model="data.model"> <option value="">- select an option -</option> <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}} </option> </select> </form> <hr> <tt>model = {{data.model}}</tt><br/> </div>
我理解這一點所以我必須做的就是這個例子是匹配模型
務必使用ng-model指令 。
對於非字符串的值 ,請使用ng-value指令 :
<select ng-model="mainCtrl.selectedHotel">
<option value="">-select hotel-</option>
<option ng-repeat="hotel in mainCtrl.hotels" ng-value="hotel">
{{hotel.name}}
</option>
</select>
欲獲得更多信息,
<select st-search="{{item.date}}" ng-model="selectedDate" ng-change="home.selectedPr = selectedDate"
class="show-tick form-control dropdown_custom_list">
<option value="">- select a date -</option>
<option ng-repeat="item in home.prData" value="{{home.selectedPr = item}}">{{item.date}}
</option>
</select>
嘗試添加ng-model
變量並在ng-change
分配所選日期。 如果沒有ng-model
ng-change
無法工作
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="demoApp" ng-controller="mainController"> <select class="show-tick form-control dropdown_custom_list" ng-model="selectedHotel" ng-options="hotel.name for hotel in hotels"> <option value="">select one--</option> </select> <div> Hotel name: {{selectedHotel.name}} Category: {{selectedHotel.category | json}} </div> </div> <script> // Code goes here angular.module('demoApp', []) .controller('mainController', MainController); function MainController($scope) { $scope.selectedHotel = {}; $scope.hotels = [{ "id ": 1, "name": "some hotel 1 ", "category": [{ "id ": 1, "hotel_id ": 1, "name ": "Cat name 1 ", "bnb ": "yes ", "simple ": "yes " }] }, { "id ": 2, "name": "some hotel 2 ", "category": [{ "id ": 1, "hotel_id ": 2, "name ": "Cat name 1 ", "bnb ": "yes ", "simple ": "yes " }] }]; // to make first one default selected.. //$scope.selectedHotel = $scope.hotels[0]; } </script>
在我不斷嘗試和搜索后,我找到了一個解決方案,所以我不得不使用ng-model並將其分配給我的selectedPr作為我的例子。 它起作用了
<select class="form-control selectpicker show-tick"
title="Select period" selectpicker ng-model="home.selectedPr"
ng-options="item.date for item in home.prData">
</select>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.