in angularjs i have a ui-select
:
<ui-select ng-model="itemSelected.selected" theme="selectize" ng-disabled="disabled">
<ui-select-match placeholder="Select an item...">{{$select.selected.Name}}</ui-select-match>
<ui-select-choices repeat="item in itemsList">
<span ng-bind-html="item.Name"></span>
</ui-select-choices>
</ui-select>
How can i select an item from code when i load the page?
When i load the page in the controller i get the $scope.itemsList
: how can i select a specific item from the controller
?
Thanks
You can set that on controller load itself
Markup
<body ng-controller="DemoCtrl">
<p>Selected: {{item.selected}}</p>
<ui-select ng-model="item.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
<ui-select-match placeholder="Select a item in the list">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="item in items | propsFilter: {name: $select.search, age: $select.search}">
<div ng-bind-html="item.Code | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</body>
Code
app.controller('DemoCtrl', function($scope, $http) {
$scope.disabled = undefined;
$scope.clear = function() {
$scope.item.selected = undefined;
};
$scope.item = {};
$scope.items = [
{ name: 'Item1', Code: 'Code1', },
{ name: 'Item2', Code: 'Code3'},
{ name: 'Item3', Code: 'Code4'},
{ name: 'Item4', Code: 'Code4' },
{ name: 'Item5', Code: 'Code5' },
];
$scope.item.selected = $scope.items[0] //here you can set the item selected
});
Working Plunkr
The plunkr by @Pankaj Parkar was no longer working for the intended usage so I forked it and got it working here:
http://plnkr.co/edit/Y6cdgJQ3YPq7Ncb3bT4A?p=preview
The key changes involved actually setting the selected item in the controller:
$scope.address = {};
$scope.refreshAddresses = function(address) {
var params = {address: address, sensor: false};
return $http.get(
'http://maps.googleapis.com/maps/api/geocode/json',
{params: params}
).then(function(response) {
$scope.addresses = response.data.results
$scope.address.selected = $scope.addresses[0];
$scope.$apply();
});
};
$scope.refreshAddresses('New York, NY');
The key addition is $scope.address.selected = $scope.addresses[0];
and $scope.refreshAddresses('New York, NY');
to get it to go.
I also updated the other selects to prepopulate, as well.