[英]Adding item to ui-select Angular
我正在使用angular-ui-select,我有一个问题。 如何修改ui-select以便可以手动添加项目 - 不仅可以选择ng-model中的现有项目,还可以添加新元素。
先感谢您
最近我想出了一个解决方案。 您可以使用ui-select-choices中的refresh选项添加一些逻辑并实现您想要的。
<ui-select-choices ...
refresh=”main.refreshResults($select)”
refresh-delay=”0"
>
<span>{{table.description}}</span>
</ui-select-choices>
然后在控制器上
function refreshResults($select){
var search = $select.search,
list = angular.copy($select.items),
FLAG = -1;
//remove last user input
list = list.filter(function(item) {
return item.id !== FLAG;
});
if (!search) {
//use the predefined list
$select.items = list;
}
else {
//manually add user input and set selection
var userInputItem = {
id: FLAG,
description: search
};
$select.items = [userInputItem].concat(list);
$select.selected = userInputItem;
}
}
我正在使用搜索字段($ select.search)来实现它以及id和description的基本对象结构。 希望能帮助到你。
只需将tagging =“true”添加到ui-select指令中即可看到该演示:
http://plnkr.co/edit/hFxGahJEFIggsL2Wdsli?p=preview
即:
<ui-select multiple ng-model="multipleDemo.colors" tagging="true" theme="select2" style="width: 300px;">
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
<ui-select-choices repeat="color in peopleAsync | filter:$select.search">
{{color}}
</ui-select-choices>
</ui-select>
当您使用字符串时,只需添加tagging
,但是当您使用对象时,您可能会收到一些错误。
在这种情况下,您需要指定转换功能以进行tagging
。 此函数应返回新对象。 看下面的代码:
<ui-select multiple tagging="transformFunction" tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors">
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
<ui-select-choices repeat="color in availableColors | filter:$select.search">
{{color}}
</ui-select-choices>
</ui-select>
并在你的控制器
transformFunction = function(new_value){ //new value is a string
//now construct the object and return them.
var new_object = {};
new_object.name = new_value;
new_object.... = ...
//some http request if you need them.
//some treatement
return new_object;
}
随意参考这个例子:
ui-select在非多选框上标记有很多错误。 我尝试的替代解决方案非常简单:
<ui-select-choices repeat="name in names.concat($select.search) | filter: $select.search">
<span ng-bind-html="name"></span>
</ui-select-choices>
这里的关键位是names.concat($select.search)
。 这可能不适合大型列表,但它可以工作。
您必须拥有我认为的模型,但是,您始终可以向模型添加更多项目。
例如,如果您有一个名为的模型
$scope.persons = [
{ name: 'Adam', email: 'adam@email.com', age: 10 },
{ name: 'Amalie', email: 'amalie@email.com', age: 12 },
{ name: 'Wladimir', email: 'wladimir@email.com', age: 30 },
{ name: 'Samantha', email: 'samantha@email.com', age: 31 },
{ name: 'Estefanía', email: 'estefanía@email.com', age: 16 },
{ name: 'Natasha', email: 'natasha@email.com', age: 54 },
{ name: 'Nicole', email: 'nicole@email.com', age: 43 },
{ name: 'Adrian', email: 'adrian@email.com', age: 21 }]
您可以使用添加人员到该列表
$scope.persons.push({ name: 'Nils', email: 'nils@email.com', age: 24 })
所以如果你有一个输入字段(你可以有一个输入字段用于电子邮件,一个用于年龄)
<input ng-model="newPerson.name">
<input ng-model="newPerson.age">
<input ng-model="newPerson.email">
(在名称输入中写入nils,在电子邮件中写入nils@email.com,在年龄输入中写入24。)
和一个按钮
<button ng-click="addPerson()">
而在你的控制器中
$scope.newPerson = {name : "", email : "", age : ""}
当用户按下按钮时,该功能
$scope.addPerson() = function(){
$scope.persons.push($scope.newPerson)
$scope.newPerson = {Name : "", Email : "", Age : ""}
}
将被调用并且模型$ scope.persons将被更改并添加到您的ui-select模型中。
ui-select必须有一个模型,但您可以轻松地将任何项添加到模型中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.