<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<div class="form-horizontal" ng-controller="mainCtrl">
<div class="form-group form-group-sm">
<label class="col-md-4 control-label">jquery, on focus dom replace</label>
<div class="col-md-8">
<select class="form-control" id="select1">
<option value="">*</option>
</select>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-md-4 control-label">ng-options, on focus data update</label>
<div class="col-md-8">
<select class="form-control" ng-model="filter.tags" ng-focus="tags_reload2()" ng-options="tag for tag in tags_values2">
<option value="">*</option>
</select>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-md-4 control-label">ng-options, on focus data replace</label>
<div class="col-md-8">
<select class="form-control" ng-model="filter.tags" ng-focus="tags_reload()" ng-options="tag for tag in tags_values">
<option value="">*</option>
</select>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-md-4 control-label">ng-repeat, on focus data replace</label>
<div class="col-md-8">
<select class="form-control" ng-model="filter.tags" ng-focus="tags_reload()">
<option value="">*</option>
<option ng-repeat="tag in tags_values">{{tag}}</option>
</select>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-md-4 control-label">ng-repeat, on focus data update</label>
<div class="col-md-8">
<select class="form-control" ng-model="filter.tags" ng-focus="tags_reload2()">
<option value="">*</option>
<option ng-repeat="tag in tags_values2">{{tag}}</option>
</select>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-md-4 control-label">ng-options, on focus data replace</label>
<div class="col-md-8">
<select class="form-control" ng-model="filter.tags" ng-focus="tags_reload()" ng-options="tag for tag in tags_values">
<option value="">*</option>
</select>
</div>
</div>
</div>
</body>
</html>
// Code goes here
angular.module("app", [])
.factory("tagsSource", function($q, $timeout) {
/* simulate ajax request with delay */
var tags = ["foo", "bar", "baz"];
return {
query: function() {
var q = $q.defer();
$timeout(function() {
q.resolve(angular.copy(tags));
}, 1000);
return q.promise
}
}
})
.controller("mainCtrl", function($scope, tagsSource) {
$scope.tags_values = [];
$scope.tags_reload = function() {
$scope.tags_values = [];
return tagsSource.query().then(function(data) {
console.debug("replacing values:", data);
$scope.tags_values = data;
});
};
$scope.tags_values2 = [];
$scope.tags_reload2 = function() {
$scope.tags_values2.length = 0;
return tagsSource.query().then(function(data) {
console.debug("populating values:", data);
Array.prototype.push.apply($scope.tags_values2, data);
});
};
});
function tagsSourceFactory() {
var tags = ["foo", "bar", "baz"];
return {
query: function() {
var q = new $.Deferred();
window.setTimeout(function() {
q.resolve(angular.copy(tags));
}, 1000);
return q.promise()
}
}
}
$(function() {
var $sel = $("#select1"), tagsSource=tagsSourceFactory();
$sel.on('focus', function() {
$sel.find("option.dynamic").detach();
tagsSource.query().then(function(data) {
console.debug("regenerating options:", data);
data.forEach(function(tag) {
$("<option class='dynamic'>" + tag + "</option>").appendTo($sel);
})
})
})
})
/* Styles go here */