2015-04-03 69 views
2

我想添加一个新的选择每一个按钮被点击时,不工作时NG-模型角度UI的选择占位符初始化

的HTML:

<div ng-repeat = "select in selects track by $index"> 
    <ui-select ng-model="selects[$index]" theme="select2" ng-disabled="disabled" style="min-width: 300px;"> 
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match> 
    <ui-select-choices repeat="person in people"> 
     <div ng-bind-html="person.name | highlight: $select.search"></div> 
    </ui-select-choices> 
    </ui-select> 
</div> 
<button ng-click="addNewSelect()"> Add new select</button> 

控制器:

$scope.selects = [{}]; 
    $scope.addNewSelect = function() { 
    $scope.selects.push({}); 
    } 

对象数组被保存在数组'selected'中,但占位符不会进入选择,因为我最初使用空对象初始化ng模型。如何让他占位符在这种情况下工作?

这里是Plunker为相同。

回答

8

您在selects[$index]之后缺少.selected

没有这个,ui-select相信你选择了一个空对象(selects[$index]),并且不会显示占位符。

<ui-select ng-model="selects[$index].selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;"> 

http://plnkr.co/edit/56SHyE01BJ4EXglLlIcb?p=preview

还你不需要查找使用索引,你可以只使用select.selected

<ui-select ng-model="select.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;"> 

http://plnkr.co/edit/3Uq8lDtDOaj5mIZVrCfv?p=preview

+1

此前使用的是angularstrap选择,最初的占位符即使对象是空的,所以错过了这个,谢谢 – Anubha 2015-04-03 11:21:19

1

要做到这一点添加CSS显示的最快方法:块占位符项目。

.select2-chosen{ 
    display: block !important; 
}