2015-04-28 17 views
5

in angularjs Ho un ui-select:Angularjs e UI-Select: come selezionare un'opzione dal codice

<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> 

come posso selezionare una voce dal codice quando carico della pagina? Quando carico la pagina nel controller ottengo il $scope.itemsList: come posso selezionare un articolo specifico da controller?

Grazie

+0

Non capisco, puoi essere più specifico? is $ scope.itemsList è un array o un oggetto? Quando carichi il controller, vuoi collegarlo con ng-model? – Ritesh

+0

puoi fornire un elemento campione nella tua lista articoli? – khanmizan

risposta

5

È possibile impostare che il carico controllore stesso

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> 

Codice

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

0

Il plunkr da @Pankaj Parkar non stava lavorando per l'utilizzo previsto così ho biforcuta e ottenuto che funziona qui:

http://plnkr.co/edit/Y6cdgJQ3YPq7Ncb3bT4A?p=preview

I cambiamenti chiave coinvolti in realtà l'impostazione della voce selezionata nel 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'); 

L'aggiunta chiave è $scope.address.selected = $scope.addresses[0]; e $scope.refreshAddresses('New York, NY'); per farlo andare.

Ho anche aggiornato gli altri selezioni per prepopolare pure.

Problemi correlati