Jho*_*val 5 focus typeahead angularjs angular-ui-bootstrap
我使用angular bootstrap ui(typeahead)尝试在输入聚焦时显示我的客户列表,其中:
lima3app.directive('typeaheadOpenOnFocus', function() {
return {
require: ['ngModel'],
link: function(scope, element, attr, ctrls) {
element.bind('focus', function() {
ctrls.$setViewValue('');
console.log('customer.customer');
});
}
};
});
所以在视图中我设置了我的输入:
<input type="text" class="form-content req" id="form-customer"
name="formcustomer"
typeahead="customer as customer.customer for customer in customerList | filter:{customer:$viewValue}"
typeahead-on-select="onCustomerSelect($item)"
typeahead-append-to-body="true"
typeahead-open-on-focus
ng-model="customer.customer"
focus="true"
required="required">
但代码,不起作用.有没有办法做到这一点？
我现在有一个可行的解决方案。有 2 个新指令可聚焦该字段并自动打开预输入下拉列表。
应用程序.js
(function () {
var secretEmptyKey = '[$empty$]'
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();
});
}
});
}
};
})
.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
});
}
}
})
.controller('TypeaheadCtrl', function($scope, $http, $timeout) {
$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.stateComparator = function (state, viewValue) {
return viewValue === secretEmptyKey || (''+state).toLowerCase().indexOf((''+viewValue).toLowerCase()) > -1;
};
$scope.onFocus = function (e) {
$timeout(function () {
$(e.target).trigger('input');
});
};
$scope.open = function() {
$scope.opened = true;
}
$scope.close = function() {
$scope.opened = false;
}
});
}());
HTML 视图
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<script src="ui-bootstrap-tpls-0.10.0.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container-fluid" ng-controller="TypeaheadCtrl">
<h4>Typeahead dropdown opens automatically</h4>
<p>2 directives automatically focus on the field and show the dropdown.
<br />
<br />
<button class="btn btn-default" ng-show="!opened" ng-click="open()">Open Input and show typeahead!</button>
<button class="btn btn-default" ng-show="opened" ng-click="close()">Close Input</button>
<br />
<br />
<input type="text" focus-me="opened" ng-focus="onFocus($event)" ng-show="opened" ng-trim="false" ng-model="selected" empty-typeahead typeahead="state for state in states | filter:$viewValue:stateComparator" class="form-control" />
<br />
</p>
<pre ng-show="opened">Model: {{selected | json}}</pre>
</div>
</body>
</html>
该解决方案是为了回答我的问题而发布的：
Angular JS - 自动聚焦输入并显示 typeahead 下拉菜单 - ui.bootstrap.typeahead
| 归档时间： |
|
| 查看次数： |
8128 次 |
| 最近记录： |