如何在oi-select angularjs中保持选择的第一个选项

Question

Plunker to try I am using oi-select library to select multiple options, I want the first value from data should be selected by default, as soon as the data is available. html code

<oi-select multiple ng-init="selectedNewRelease=releaseList[0]" 
oi-options="item.releaseId for item in releaseList" ng-model="selectedNewRelease" 
placeholder="Select Releases" 
oi-select-options="{dropdownFilter: 'myDropdownFilter'}" id="selectedReleases" 
ng-change="onReleaseChange();toggleCol();"></oi-select>

I tried with ng-init, by assigning as below :

 $scope.selectedNewRelease=$scope.releaseList[0];

This actually works but as soon as I select one or more option it removes default selected option. Any idea any link please. link for oi-select

Answer 1

when setting default value for oi-select (multiple) with a Object not Array, selecting new item will lead to overwriting the original value. So you should init it with an Array .Something like this:

ng-init="selectedNewRelease=[releaseList[0]]

refer this plunker .

---

UPDATE:

oi-select used ngModel to achieve two-way-databinding , and since angular won't trigger change if the instance of the array is not changed(means ng-change won't fire without instance changed).

So after push new items, you should do something like this:

$scope.selectedNewRelease = $scope.selectedNewRelease.slice(); // create new instance for the array.

Answer 2

try this

ng-init="selectedNewRelease=releaseList[0]" instead of ng-init="releaseList[0]"

Edit:

Or remove ng-init="selectedNewRelease=releaseList[0]" on oi-select and assign the value in controller after load the releaseList data

like

function controller($scope)
{
Loaddropdown()
{
$http().success(function(data){
$scope.releaseList = data;
$scope.selectedNewRelease =$scope.releaseList[0]//or $scope.selectedNewRelease=$scope.releaseList[0].Id// which id means what's your value  
})
}
}