Javascript 在AngularJS项目中设置Typeahead下拉列表的宽度
我一直在努力解决引导UI类型超前控制。我试图在运行时设置下拉框的宽度。我问的问题是在运行时设置元素的宽度。虽然回答正确,但由于某些原因,答案在Typeahead指令的上下文中不起作用。目前,我在自己的指令中使用Typeahead控件,其定义如下:Javascript 在AngularJS项目中设置Typeahead下拉列表的宽度,javascript,angularjs,Javascript,Angularjs,我一直在努力解决引导UI类型超前控制。我试图在运行时设置下拉框的宽度。我问的问题是在运行时设置元素的宽度。虽然回答正确,但由于某些原因,答案在Typeahead指令的上下文中不起作用。目前,我在自己的指令中使用Typeahead控件,其定义如下: .directive('myDirective', function () { return { restrict:'E', transclude: true, scope: { showLinks: '=?',
.directive('myDirective', function () {
return {
restrict:'E',
transclude: true,
scope: {
showLinks: '=?',
query: '='
},
templateUrl: '/directives/my-directive.html',
controller: function ($scope) {
if (angular.isUndefined($scope.showLinks)) {
$scope.showLinks = true;
}
$scope.getLocation = function(l) {
var searchField = element.find('input');
var width = searchField[0].offsetWidth;
var dropdown = $element.find('.dropdown-menu');
angular.element(dropdown[0]).css('width', (width + 'px'));
};
}
};
});
<div style="width:100%;">
<span>{{showLinks}}</span> <!-- renders just fine -->
<input type="text" autofocus autocomplete="off" class="form-control" ng-model="query"
typeahead="option as option.Name for option in getLocation($viewValue)"
typeahead-min-length="3" typeahead-template-url="location.html" />
<script type="text/ng-template" id="location.html">
{{showLinks}} <!-- Never renders -->
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
</script>
</div>
my-directive.html如下所示:
.directive('myDirective', function () {
return {
restrict:'E',
transclude: true,
scope: {
showLinks: '=?',
query: '='
},
templateUrl: '/directives/my-directive.html',
controller: function ($scope) {
if (angular.isUndefined($scope.showLinks)) {
$scope.showLinks = true;
}
$scope.getLocation = function(l) {
var searchField = element.find('input');
var width = searchField[0].offsetWidth;
var dropdown = $element.find('.dropdown-menu');
angular.element(dropdown[0]).css('width', (width + 'px'));
};
}
};
});
<div style="width:100%;">
<span>{{showLinks}}</span> <!-- renders just fine -->
<input type="text" autofocus autocomplete="off" class="form-control" ng-model="query"
typeahead="option as option.Name for option in getLocation($viewValue)"
typeahead-min-length="3" typeahead-template-url="location.html" />
<script type="text/ng-template" id="location.html">
{{showLinks}} <!-- Never renders -->
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
</script>
</div>
{{showLinks}}
{{showLinks}}
如何设置与指令中的文本框宽度相同的下拉菜单宽度?我的文本框在不同的屏幕上大小不同。这就是为什么我不只是硬编码一个值。关于的答案,您可以尝试将结果包装在div中,然后为其指定所需的宽度。为了举例说明,我们将div的宽度设置为
800px
<div style="width:100%;">
<span>{{showLinks}}</span> <!-- renders just fine -->
<input type="text" autofocus autocomplete="off" class="form-control" ng-model="query"
typeahead="option as option.Name for option in getLocation($viewValue)"
typeahead-min-length="3" typeahead-template-url="location.html" />
<script type="text/ng-template" id="location.html">
<div style="width:800px;">{{showLinks}}</div>
<a>
<span ng-bind-html="match.label | typeaheadHighlight:query"></span>
</a>
</script>
</div>
{{showLinks}}
{{showLinks}}
参考的答案,您可以尝试将结果包装在div中,然后为其指定所需的宽度。为了举例说明,我们将div的宽度设置为800px
<div style="width:100%;">
<span>{{showLinks}}</span> <!-- renders just fine -->
<input type="text" autofocus autocomplete="off" class="form-control" ng-model="query"
typeahead="option as option.Name for option in getLocation($viewValue)"
typeahead-min-length="3" typeahead-template-url="location.html" />
<script type="text/ng-template" id="location.html">
<div style="width:800px;">{{showLinks}}</div>
<a>
<span ng-bind-html="match.label | typeaheadHighlight:query"></span>
</a>
</script>
</div>
{{showLinks}}
{{showLinks}}
typeahead指令位置如何工作的一个有趣的副作用,让我们用一个简单的模板覆盖来实现这一点。有效差异是:
”,宽度:位置。宽度+'px'
当然,这种影响是全球性的
angular.module("template/typeahead/typeahead-popup.html").run(["$templateCache", function($templateCache) {
$templateCache.put("template/typeahead/typeahead-popup.html",
"<ul class=\"dropdown-menu\" ng-show=\"isOpen()\" ng-style=\"{top: position.top+'px', left: position.left+'px', width: position.width+'px'}\" style=\"display: block;\" role=\"listbox\" aria-hidden=\"{{!isOpen()}}\">\n" +
" <li ng-repeat=\"match in matches track by $index\" ng-class=\"{active: isActive($index) }\" ng-mouseenter=\"selectActive($index)\" ng-click=\"selectMatch($index)\" role=\"option\" id=\"{{match.id}}\">\n" +
" <div typeahead-match index=\"$index\" match=\"match\" query=\"query\" template-url=\"templateUrl\"></div>\n" +
" </li>\n" +
"</ul>\n" +
"");
}]);
angular.module(“template/typeahead/typeahead popup.html”)。运行([“$templateCache”,函数($templateCache){
$templateCache.put(“template/typeahead/typeahead popup.html”,
“\n”+
“\n”+
“\n”+
“
\n”+
"");
}]);
typeahead指令位置如何工作的一个有趣的副作用,让我们用一个简单的模板覆盖来实现这一点。有效差异是:
”,宽度:位置。宽度+'px'
当然,这种影响是全球性的
angular.module("template/typeahead/typeahead-popup.html").run(["$templateCache", function($templateCache) {
$templateCache.put("template/typeahead/typeahead-popup.html",
"<ul class=\"dropdown-menu\" ng-show=\"isOpen()\" ng-style=\"{top: position.top+'px', left: position.left+'px', width: position.width+'px'}\" style=\"display: block;\" role=\"listbox\" aria-hidden=\"{{!isOpen()}}\">\n" +
" <li ng-repeat=\"match in matches track by $index\" ng-class=\"{active: isActive($index) }\" ng-mouseenter=\"selectActive($index)\" ng-click=\"selectMatch($index)\" role=\"option\" id=\"{{match.id}}\">\n" +
" <div typeahead-match index=\"$index\" match=\"match\" query=\"query\" template-url=\"templateUrl\"></div>\n" +
" </li>\n" +
"</ul>\n" +
"");
}]);
angular.module(“template/typeahead/typeahead popup.html”)。运行([“$templateCache”,函数($templateCache){
$templateCache.put(“template/typeahead/typeahead popup.html”,
“\n”+
“\n”+
“\n”+
“
\n”+
"");
}]);
我在分配给typeahead的变量打开时设置了一个观察程序,成功地使其工作
指令模板中的
<input type="text" ng-model="asyncSelected" placeholder="Type something" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" typeahead-is-open="typeaheadIsOpen" class="form-control">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> No Results Found
</div>
我在分配给typeahead的变量上设置了一个监视程序,使它能够工作 指令模板中的
<input type="text" ng-model="asyncSelected" placeholder="Type something" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" typeahead-is-open="typeaheadIsOpen" class="form-control">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> No Results Found
</div>
.drp.下拉菜单{
左:8px!重要;
宽度:钙(100%-15px);
}
.drp.下拉菜单{
左:8px!重要;
宽度:钙(100%-15px);
}
我提出了一个类似的问题,与定制typeahead下拉列表有关。按照模板方法解决(接受答案)。你可以看一眼,也许对你有帮助。@Pam我可能遗漏了什么。但是,当我使用接受答案中的plunker时,下拉列表的宽度与文本框的宽度不同。此外,我看不到有关下拉列表宽度的问题。我遗漏了什么吗?我提出了一个与定制typeahead下拉列表相关的类似问题。按照模板方法解决(接受答案)。你可以看一眼,也许对你有帮助。@Pam我可能遗漏了什么。但是,当我使用接受答案中的plunker时,下拉列表的宽度与文本框的宽度不同。此外,我看不到有关下拉列表宽度的问题。我错过什么了吗?