Using <select> and <option> in AngularJS
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:
Answer
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,