在AngularJS中使用<select>和<option>
[英]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到我想要实现的目标：
3 个解决方案
解决方案1
4 2017-07-10 11:52:28
请参阅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>
欲获得更多信息，
解决方案2
2 已采纳 2017-07-10 11:43:24
<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>
解决方案3
1 2017-07-10 12:56:44
在我不断尝试和搜索后，我找到了一个解决方案，所以我不得不使用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>
在AngularJS中将ng-options与选项select一起使用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.