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:
mycode
<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>
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>
Update
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,
- AngularJS API Reference - Using
ngValue to bind the model to an array of objects
- AngularJS API Reference - Using
ngRepeat to generate select options
- AngularJS API Reference - Using
select with ngOptions and setting a default value
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>
