角度 UI 类型提前开始
Angular UI typeahead startswith
我在输入方面有问题。我有一个包含一个人的名字和姓氏的字段,如果我输入 A,我希望看到对姓氏的关注,而不是名字的主角。
这是一个例子:
function TypeaheadCtrl($scope) {
$scope.selected = undefined;
$scope.Person = ['Jane Smith', 'John Smith', 'Sam Smith', 'John Doe','Daniel Doe'];
}
当我输入S时,我只想看到简·史密斯和约翰·史密斯。有办法做到这一点??
普伦克:http://plnkr.co/edit/inwmqYCCRsjs1G91Sa3Q?p=preview
我假设您希望在 sourceArray 中找到的每个列出的项目都仅突出显示姓氏的搜索词。如果不修改指令本身,这是不可能的,但我有一个替代解决方案,尽管它也突出显示了名字中的搜索词(如果匹配),但仅显示姓氏与搜索词匹配的人的结果。我希望这有帮助:
angular.module("firstChar", ["ui.bootstrap"]);
angular.module("firstChar").controller("TypeaheadCtrl", function($scope, $filter) {
$scope.selected = undefined;
// ==========================================================
// You would have to replace the JSON assignment code below
// with a call to $http.get, to get that file you talked
// about in your comment below:
//
// $http.get('OutAnagrafica.json').success(function (data) {
// $scope.OutAnagrafica = data;
// });
//
// ==========================================================
$scope.OutAnagrafica = [
{
"Name": "Jane Smith"
},
{
"Name": "John Smith"
},
{
"Name": "Sam Smith"
},
{
"Name": "Sam Northrop"
},
{
"Name": "John Doe"
},
{
"Name": "Daniel Doe"
}
];
$scope.persons = $scope.OutAnagrafica.map(function (person) {
var nameParts = person.Name.split(" "),
name = nameParts[0],
surname = nameParts.slice(1).join(" ");
return {
"name": name,
"surname": surname
};
});
$scope.getPersonsFromSurnames = function(searchTerm) {
return $filter("filter")($scope.persons.map(function (person) {
return {
"fullname": person.name + " " + person.surname,
"surname": person.surname
};
}), {
"surname": searchTerm
});
}
});
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<div ng-app="firstChar">
<div class="container-fluid" ng-controller="TypeaheadCtrl">
<div>Selected: <span>{{selected}}</span>
</div>
<div>
<input type="text" ng-model="selected" typeahead="person.fullname for person in getPersonsFromSurnames($viewValue)">
</div>
</div>
</div>
从 http://angular-ui.github.io/bootstrap/#/typeahead,看这条线
<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" class="form-control">
你可能可以做这样的事情
<input type="text" ng-model="selected" typeahead="name for name in getPersonLastName($viewValue)">
这意味着你有一个 getPersonLastName 函数来查看$scope。人员并返回与姓氏与$viewValue匹配的名称。
- 为什么会出现错误;未捕获的类型错误:undefined不是函数;
- 如何在DOM元素上按类型构建此函数
- 同样,同样的错误'ahorcado.js:26未捕获类型错误:无法读取属性'beginPath'
- YUI3 IO实用程序是否可以根据给定的内容类型标头值自动序列化数据
- Webpack/Rect:遵循egghead.io教程,但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- 如何从querySelectorAll中获取按钮类型
- 如何在输入字段中的按钮的帮助下打开日历,该字段的类型为“=”;日期”;
- 如何将具有文本类型值的var放入jQuery函数中
- javascript解释器如何理解变量的数据类型
- 可变大小的JavaScript字符串如何成为基元类型
- AngularJS指令只识别双向绑定类型
- 在<输入类型=“;文件“/>
- 从查询字符串参数推断出正确的数据类型
- 从单击日期开始将数据放入输入类型中
- 角度 UI 类型提前开始
- 尝试从头开始使用Javascript创建each()类型的jQuery函数
- 从第4版开始没有图像类型
- W3C错误:文档类型不允许元素X在这里;缺少一个Y开始标签
- 文档类型不允许元素"script"在这里;假设失踪的“身体”;开始标记
- 级联对象声明从第二个对象开始提供未定义的类型