针对angularjs–从typeahead中选择一个显示Objec对象的值和angular获取checkbox选中的值这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展AngularJS-自
针对angularjs – 从typeahead中选择一个显示Objec对象的值和angular获取checkbox选中的值这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展Angular JS-自动聚焦输入并显示typeahead下拉菜单-ui.bootstrap.typeahead、angular – ng-bootstrap typeahead TypeError：Object(…)不是函数、angular – 如何捕获NgbTypeahead SelectedItemEvent？、angular-ui-bootstrap – 如何将Angular UI Typeahead对齐到右侧等相关知识，希望可以帮助到你。
本文目录一览：- angularjs – 从typeahead中选择一个显示Objec对象的值（angular获取checkbox选中的值）
- Angular JS-自动聚焦输入并显示typeahead下拉菜单-ui.bootstrap.typeahead
- angular – ng-bootstrap typeahead TypeError：Object(…)不是函数
- angular – 如何捕获NgbTypeahead SelectedItemEvent？
- angular-ui-bootstrap – 如何将Angular UI Typeahead对齐到右侧
angularjs – 从typeahead中选择一个显示Objec对象的值（angular获取checkbox选中的值）
这是我的HTML标记
<divhttps://www.jb51.cc/tag/ott/" target="_blank">ottom: 24px;" append-source>
<formrole="form">
<div>
<label><i></i> State</label>
<input type="text"ng-model="selectedState" ng-options="state.FirstName for state in states" placeholder="Enter state" bs-typeahead>
</div>
</form>
</div>
这是我的AngularJS代码
var app = angular.module('mgcrea.ngStrapDocs',['ngAnimate','ngSanitize','mgcrea.ngStrap'])
.controller('TypeaheadDemoCtrl',function ($scope,$templateCache,$http) {
$scope.selectedState = '';
$http.get('/api/servicesapi/GetAllClients')
.then(
function (result) {
//success
$scope.states = result.data;
},function () {
//error
});
});
看到这里的图像
Angular JS-自动聚焦输入并显示typeahead下拉菜单-ui.bootstrap.typeahead
我正在使用Angular JS-ui.bootstrap.typeahead：
我想单击一个按钮并聚焦于一个输入字段，并自动显示预先输入建议下拉列表。我有一条指令，当单击按钮时，该指令会自动聚焦输入字段。如何自动显示下拉菜单，以便用户可以使用向下箭头或单击来快速选择用户？
我用可编辑的ui-bootstrap JS文件创建了一个Plunker：
http://plnkr.co/edit/Z79LY0OYlwFc3wirjxol?p=preview
这是我的完整脚本：
<!doctype html> <html ng-app="plunker"> <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script> <script src="ui-bootstrap-tpls-0.10.0.js"></script> </head> <body> <script> angular.module(''plunker'', [''ui.bootstrap'']) .directive(''focusMe'', function($timeout, $parse) { return { //scope: true, // optionally create a child scope link: function(scope, element, attrs) { var model = $parse(attrs.focusMe); scope.$watch(model, function(value) { if(value === true) { $timeout(function() { element[0].focus(); }); } }); } }; }); function TypeaheadCtrl($scope, $http) { $scope.selected = undefined; $scope.states = [''Alabama'', ''Alaska'', ''Arizona'', ''Arkansas'', ''California'', ''Colorado'', ''Connecticut'', ''Delaware'', ''Florida'', ''Georgia'', ''Hawaii'', ''Idaho'', ''Illinois'', ''Indiana'', ''Iowa'', ''Kansas'', ''Kentucky'', ''Louisiana'', ''Maine'', ''Maryland'', ''Massachusetts'', ''Michigan'', ''Minnesota'', ''Mississippi'', ''Missouri'', ''Montana'', ''Nebraska'', ''Nevada'', ''New Hampshire'', ''New Jersey'', ''New Mexico'', ''New York'', ''North Dakota'', ''North Carolina'', ''Ohio'', ''Oklahoma'', ''Oregon'', ''Pennsylvania'', ''Rhode Island'', ''South Carolina'', ''South Dakota'', ''Tennessee'', ''Texas'', ''Utah'', ''Vermont'', ''Virginia'', ''Washington'', ''West Virginia'', ''Wisconsin'', ''Wyoming'']; $scope.opened = false; $scope.open = function() { $scope.opened = true; } $scope.close = function() { $scope.opened = false; } } </script> <divcontainer-fluid'' ng-controller="TypeaheadCtrl"> <h4>How can I open the typeahead dropdown automatically when button is pressed?</h4> <p>I have a directive that automatically focuses on the field but I can''t seem to automatically show the typeahead. Even adding down arrow key click support would be great. <br/><br/> <buttonng-show="!opened" ng-click="open()">Open Input and show typeahead!</button> <buttonng-show="opened" ng-click="close()">Close Input</button> <br/><br/> <input type="text" focus-me="opened" ng-show="opened" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8"> <br/> <pre ng-show="opened">Model: {{selected | json}}</pre> </div> </body> </html>答案1
小编典典正如HarishR在评论中提到的那样，尚无对此功能的内置支持。
但是我只想尝试一下，结果是这样：http :
//plnkr.co/edit/Qrnat8yTvISuM1qHHDlA?p=preview
它包含许多使它起作用的技巧：
- 为了使用.trigger（）包含jQuery，可以用本机JS替换，但我很懒。
- 使用ng-focus调用.trigger（’input’）触发字体弹出
- 使用ng-trim =“ false”禁用输入的值自动修整
- 一个自定义的empty-typeahead指令，可与ngModel的控制器进行交互，以应用secretEmptyKey逻辑来绕过typeahead-min-length检查：
.directive(''emptyTypeahead'', function () { return { require: ''ngModel'', link: function (scope, element, attrs, modelCtrl) { // this parser run before typeahead''s parser modelCtrl.$parsers.unshift(function (inputValue) { var value = (inputValue ? inputValue : secretEmptyKey); // replace empty string with secretEmptyKey to bypass typeahead-min-length check modelCtrl.$viewValue = value; // this $viewValue must match the inputValue pass to typehead directive return value; }); // this parser run after typeahead''s parser modelCtrl.$parsers.push(function (inputValue) { return inputValue === secretEmptyKey ? '''' : inputValue; // set the secretEmptyKey back to empty string }); } } })一个自定义过滤器比较器函数，当一个参数为secretEmptyKey时始终返回true（显示所有结果）：
$scope.stateComparator = function (state, viewValue) {return viewValue === secretEmptyKey || (‘’+state).toLowerCase().indexOf((‘’+viewValue).toLowerCase()) > -1;
};删除limitTo过滤器以显示所有结果
如果内容太长，则设置max-height和溢出CSS属性以显示滚动条
做完了！
angular – ng-bootstrap typeahead TypeError：Object(…)不是函数
但我不断收到以下错误：
ERROR TypeError: Object(...) is not a function at new NgbTypeahead (typeahead.js:52) at createClass (core.js:12449) at createDirectiveInstance (core.js:12284) at createViewNodes (core.js:13742) at callViewAction (core.js:14176) at execComponentViewsAction (core.js:14085) at createViewNodes (core.js:13770) at callViewAction (core.js:14176) at execComponentViewsAction (core.js:14085) at createViewNodes (core.js:13770)
并且：
ERROR TypeError: Cannot read property 'instance' of undefined at nodeValue (core.js:11753) at Object.eval [as handleEvent] (NgbdTypeaheadBasic.html:9) at handleEvent (core.js:13547) at callWithDebugContext (core.js:15056) at Object.debugHandleEvent [as handleEvent] (core.js:14643) at dispatchEvent (core.js:9962) at eval (core.js:10587) at HTMLDocument.eval (platform-browser.js:2628) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4740)
我从网站link复制了Simple Typeahead代码.
我的package.json文件：
{
“名称”：“测试型提前”,
“版本”：“0.0.0”,
“执照”：“麻省理工学院”,
“脚本”：{
“ng”：“ng”,
“开始”：“ng serve”,
“build”：“ng build –prod”,
“测试”：“ng测试”,
“lint”：“ng lint”,
“e2e”：“ng e2e”
},
“私人”：是的,
“依赖”：{
“@ angular / animations”：“^ 5.2.0”,
“@ angular / common”：“^ 5.2.0”,
“@ angular / compiler”：“^ 5.2.0”,
“@ angular / core”：“^ 5.2.0”,
“@ angular / forms”：“^ 5.2.0”,
“@ angular / http”：“^ 5.2.0”,
“@ angular / platform-browser”：“^ 5.2.0”,
“@ angular / platform-browser-dynamic”：“^ 5.2.0”,
“@ angular / router”：“^ 5.2.0”,
“@ ng-bootstrap / ng-bootstrap”：“^ 2.0.0-alpha.0”,
“bootstrap”：“^ 4.1.0”,
“core-js”：“^ 2.4.1”,
“rxjs”：“^ 5.5.6”,
“zone.js”：“^ 0.8.19”
},
“devDependencies”：{
“@ angular / cli”：“~1.7.3”,
“@ angular / compiler-cli”：“^ 5.2.0”,
“@ angular / language-service”：“^ 5.2.0”,
“@ types / jasmine”：“~2.8.3”,
“@ types / jasminewd2”：“~2.0.2”,
“@ types / node”：“~6.0.60”,
“codelyzer”：“^ 4.0.1”,
“茉莉核心”：“~2.8.0”,
“jasmine-spec-reporter”：“~4.2.1”,
“业力”：“~2.0.0”,
“karma-chrome-launcher”：“~2.2.0”,
“karma-coverage-istanbul-reporter”：“^ 1.2.1”,
“karma-jasmine”：“~1.1.0”,
“karma-jasmine-html-reporter”：“^ 0.2.2”,
“量角器”：“~5.1.2”,
“ts-node”：“~4.1.0”,
“tslint”：“~5.9.1”,
“打字稿”：“~2.5.3”
}
}
到目前为止我尝试了什么：
>用npm重新安装node_modules – 没有帮助
>使用角度CLI开始了一个全新的项目并在那里试用了代码 – 没有帮助.
任何帮助是极大的赞赏！
解决方法
所以package.json文件：
`dependencies .... "@ng-bootstrap/ng-bootstrap": "^1.1.1",.... dependencies`
感谢JB Nizet和Niladri的快速解答
编辑：另外,正如@Niladri在评论中所说,你需要为你想要使用的模块使用forRoot().这是针对Angular 5的official documentation of version 1.1,这里说的是,但更新版本的角度曲线的新文档并未说明,因为它已被更改.所以记住这一点！
angular – 如何捕获NgbTypeahead SelectedItemEvent？
<input type="text" [(ngModel)]="model" [ngbTypeahead]="search" placeholder="Search" [resultTemplate]="rt" [inputFormatter]="formatter" />
解决方法
<input type="text"(selectItem)="itemSelected($event)" [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" />
这将在你的组件类中：
itemSelected($event) {
alert($event.item.name);
}
这是一个工作的plunker：plunker
angular-ui-bootstrap – 如何将Angular UI Typeahead对齐到右侧
这在angular-ui-bootstrap网站中提到：
The $uibPosition service provides a set of DOM utilities used internally to absolute-position an element in relation to another element (tooltips,popovers,typeaheads etc…).
我无法理解.有什么例子吗？
解决方法
.rtl .dropdown-menu{
float:right;
position:inherit;
}
关于angularjs – 从typeahead中选择一个显示Objec对象的值和angular获取checkbox选中的值的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于Angular JS-自动聚焦输入并显示typeahead下拉菜单-ui.bootstrap.typeahead、angular – ng-bootstrap typeahead TypeError：Object(…)不是函数、angular – 如何捕获NgbTypeahead SelectedItemEvent？、angular-ui-bootstrap – 如何将Angular UI Typeahead对齐到右侧等相关知识的信息别忘了在本站进行查找喔。
本文标签：
![[转帖]Ubuntu 安装 Wine方法（ubuntu如何安装wine）](https://www.gvkun.com/zb_users/cache/thumbs/4c83df0e2303284d68480d1b1378581d-180-120-1.jpg)
