ui-select 列表中显示的重复项,当动态更新新值并更改 ui-select 中的 selected 值时,多个 (angular js)
duplicate item showing in ui-select list, when dynamically updating new values and changing selected value in ui-select multiple (angular js)
无法更新新值并动态更改 ui-select 中的 selected 值
更新值在列表中重复
我添加了让员工更新模型和更新员工以添加新数据和预先select该值。
我所做的是
- 创建了一个添加模型按钮,它将填充 uiselect.
中的值
- 创建了一个更新模型按钮以添加新值并将其更改为 selected
- 单击添加模型时,它会列为 item1、item2 和 item3
- 单击更新模型时,它会添加一个新项目 "item4" 并将其设为 selected
问题是 item4 正在 selected 但它也显示在 selection
的列表中
plunkr link 下面给出
http://plnkr.co/edit/RCEQeSp00QhnLl4wegpz?p=preview
<ui-select style="width: 800px;" ng-disabled="disabled" theme="select2" ng-model="vm.employees.selected" multiple="">
<ui-select-match placeholder="Select employee...">{{$item.name}} <{{$item.city}}></ui-select-match>
<ui-select-choices refresh-delay="0" refresh="vm.getdata($select.search)" repeat="employee.id as employee in vm.employees | propsFilter: {name: $select.search} ">
<div ng-bind-html="employee.name | highlight: $select.search"></div>
<small>
name: {{employee.name}}
city: <span ng-bind-html="''+employee.city | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>
app.controller('DemoCtrl', function($http) {
var vm = this;
vm.name = 'World';
function getemployee() {
var employees = [];
$http.get('employees.json').success(function(data) {
vm.employees = data;
});
}
vm.updateemployee = function() {
console.log(vm.employees);
vm.selvalues = vm.employees.selected;
vm.employees.selected = undefined;
vm.employees.push({
id: 9,
name: "test",
city: "chennai",
state: "TN"
});
vm.selvalues.push(9);
vm.employees.selected = vm.selvalues;
console.log(vm.employees);
console.log(vm.employees.selected);
}
vm.getdata = function(query) {
console.log(vm.employees);
console.log(vm.employees.selected);
}
vm.employees = {};
vm.selvalues = [];
vm.employees.selected = [];
vm.employees = [];
vm.getemployee = getemployee;});
[plunkr link][1]
vm.selvalues= vm.employees.selected;
vm.employees.selected=undefined;
vm.employees=vm.employees.concat({id:9,name:"test",city:"chennai",state:"TN"});
vm.employees.selected = vm.selvalues.concat(9);
将 push 更改为 concat 对我有用。 感谢所有试图帮助我的人
无法更新新值并动态更改 ui-select 中的 selected 值 更新值在列表中重复
我添加了让员工更新模型和更新员工以添加新数据和预先select该值。
我所做的是
- 创建了一个添加模型按钮,它将填充 uiselect. 中的值
- 创建了一个更新模型按钮以添加新值并将其更改为 selected
- 单击添加模型时,它会列为 item1、item2 和 item3
- 单击更新模型时,它会添加一个新项目 "item4" 并将其设为 selected
问题是 item4 正在 selected 但它也显示在 selection
的列表中plunkr link 下面给出 http://plnkr.co/edit/RCEQeSp00QhnLl4wegpz?p=preview
<ui-select style="width: 800px;" ng-disabled="disabled" theme="select2" ng-model="vm.employees.selected" multiple="">
<ui-select-match placeholder="Select employee...">{{$item.name}} <{{$item.city}}></ui-select-match>
<ui-select-choices refresh-delay="0" refresh="vm.getdata($select.search)" repeat="employee.id as employee in vm.employees | propsFilter: {name: $select.search} ">
<div ng-bind-html="employee.name | highlight: $select.search"></div>
<small>
name: {{employee.name}}
city: <span ng-bind-html="''+employee.city | highlight: $select.search"></span>
</small>
</ui-select-choices>
</ui-select>
app.controller('DemoCtrl', function($http) {
var vm = this;
vm.name = 'World';
function getemployee() {
var employees = [];
$http.get('employees.json').success(function(data) {
vm.employees = data;
});
}
vm.updateemployee = function() {
console.log(vm.employees);
vm.selvalues = vm.employees.selected;
vm.employees.selected = undefined;
vm.employees.push({
id: 9,
name: "test",
city: "chennai",
state: "TN"
});
vm.selvalues.push(9);
vm.employees.selected = vm.selvalues;
console.log(vm.employees);
console.log(vm.employees.selected);
}
vm.getdata = function(query) {
console.log(vm.employees);
console.log(vm.employees.selected);
}
vm.employees = {};
vm.selvalues = [];
vm.employees.selected = [];
vm.employees = [];
vm.getemployee = getemployee;});
[plunkr link][1]
vm.selvalues= vm.employees.selected;
vm.employees.selected=undefined;
vm.employees=vm.employees.concat({id:9,name:"test",city:"chennai",state:"TN"});
vm.employees.selected = vm.selvalues.concat(9);
将 push 更改为 concat 对我有用。 感谢所有试图帮助我的人