I have this anchor tag and i change my view depending on the date coming from the object. I am trying to change it to be a select option but it is not working the way i am doing it.
This is anchor tag syntax:
<a href="#" ng-repeat="item in home.prData" ng-click="home.selectedPr = item; $event.preventDefault();
$event.stopPropagation();">{{item.date}}</a>
I am trying to change it to be like that when i use select option
<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>
i created an example plunkr to what i am trying to achieve:
See AngularJS select Directive API Reference - Using ngRepeat
to generate select
options
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>
I do understand this so what i have to do as this example is to match the model
Be sure to use the ng-model directive .
For values that are other than strings, use the ng-value directive :
<select ng-model="mainCtrl.selectedHotel">
<option value="">-select hotel-</option>
<option ng-repeat="hotel in mainCtrl.hotels" ng-value="hotel">
{{hotel.name}}
</option>
</select>
For more information,
<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>
Try adding a ng-model
variable and on ng-change
assign selected date. ng-change
wont work without ng-model
<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>
after i kept trying and searching i found a solution so i had to use an ng-model and assign it to my selectedPr as my example. and it worked
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.