Populating HTML Select DropDownList without selected option
The option element has been assign ng-repeat directive to iterate to all items of the Fruits array.
The Id property is assigned to the value attribute and the Name property is set as inner HTML for the option element.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.Fruits = [{
Id: 1,
Name: 'Apple',
Selected: false
}, {
Id: 2,
Name: 'Mango',
Selected: true
}, {
Id: 3,
Name: 'Orange',
Selected: false
}];
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<select>
<option value = "0" label = "Please Select"></option>
<option ng-repeat="fruit in Fruits" value="{{fruit.Id}}">
{{fruit.Name}}
</option>
</select>
</div>
</body>
</html>
Populating HTML DropDownList Select with selected option
The option element has been assign ng-repeat directive to iterate to all items of the Fruits array.
The Id property is assigned to the value attribute and the Name property is set as inner HTML for the option element.
ng-selected directive
In order to set an option as selected, you will need to use the ng-selected
directive and assign it a Boolean expression. In the following example
an option must be set as selected if the Selected property is true.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.Fruits = [{
Id: 1,
Name: 'Apple',
Selected: false
}, {
Id: 2,
Name: 'Mango',
Selected: true
}, {
Id: 3,
Name: 'Orange',
Selected: false
}];
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<select>
<option value = "0" label = "Please Select"></option>
<option ng-repeat="fruit in Fruits" value="{{fruit.Id}}"
ng-selected="{{ fruit.Selected == true }}">
{{fruit.Name}}
</option>
</select>
</div>
</body>
</html>
No comments:
Post a Comment