var app = angular.module('plunker', ['ui.bootstrap']).directive('inputDataListDropdown', function () {
return {
restrict: 'EA',
scope: {
model: '=',
choices: '='
},
template: '<div class="dropdown no-bullets">'+
'<a class="dropdown-toggle">'+
'<input type="text" ng-model="model">' +
'</a>'+
'<ul class="dropdown-menu">' +
'<li ng-repeat="choice in choices">' +
'<a ng-click="$parent.model=choice">{{choice}}</a>'+
'</li>'+
'</ul>'+
'</div>',
replace: true
};
});
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.item = "What?!";
$scope.items = [
"Option 1",
"Option 2",
"Option 3"
];
$scope.items[$scope.items.length] = $scope.item;
$scope.data = [
{ Value:"A", Options: ["A Option 1","A Option 2","A Option 3"] },
{ Value:"B", Options: ["B Option 1","B Option 2","B Option 3"] }
];
});
<!doctype html>
<html ng-app="plunker">
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<div class="well">
<input-data-list-dropdown choices="items" model="item"></input-data-list-dropdown>
<label>When you click it, it should drop down the list of options.</label>
</div>
<div class="well">
<table>
<tbody>
<tr ng-repeat="d in data">
<td>
<input type="text" ng-model="d.Value" list="{{d.Options}}">
<datalist id="{{d.Options}}">
<option ng-repeat="option in d.Options" value="{{option}}"></option>
</datalist>
</td>
</tr>
</tbody>
</table>
This is a datalist
</div>
<div class="well">
<table>
<tbody>
<tr ng-repeat="d in data">
<td>
<input-data-list-dropdown choices="d.Options" model="d.Value"></input-data-list-dropdown>
</td>
</tr>
</tbody>
</table>
This is a dropdown.
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
<script src="app.js"></script>
</body>
</html>