Come aggiungere opzioni a una selezione con una direttiva AngularJS?

Question

Ho un tag select (da utilizzare per la selezione del paese), che voglio precompilare con le opzioni utilizzando una direttiva:

<select class="countryselect" required ng-model="cust.country"></select> 

mia direttiva va come

return { 
    restrict : "C", 
    link: function postLink(scope, iElement, iAttrs) { 
    var countries = [ 
     ["AND","AD - Andorra","AD"], 
     ["UAE","AE - Vereinigte Arabische Emirate","AE"] 
     ... //loop array and generate opt elements 
     iElement.context.appendChild(opt); 
    } 
    } 

sono in grado di riempire il selezionare con opzioni aggiuntive, ma l'associazione ng-model non funziona. Anche se cust.country ha un valore (ad esempio "UAE"), l'opzione non è selezionata.

Come rendere la selezione visualizzare il valore di cust.country? Se pensi che ho qualche problema di temporizzazione qui.

Answer 1

È possibile utilizzare direttiva da Angular JS:

Markup:

<div ng-controller="MainCtrl"> 
<select ng-model="country" ng-options="c.name for c in countries"></select> 
{{country}} 
</div> 

Script:

app.controller('MainCtrl', function($scope) { 
    $scope.countries = [ 
    {name:'Vereinigte Arabische Emirate', value:'AE'}, 
    {name:'Andorra', value:'AD'}, 
    ]; 

    $scope.country = $scope.countries[1]; 

}); 

Controllare la documentazione di selezionare: Angular Select

EDIT ALLA DIRETTIVA

direttiva:

app.directive('sel', function() { 
    return { 
     template: '<select ng-model="selectedValue" ng-options="c.name for c in countries"></select>', 
     restrict: 'E', 
     scope: { 
      selectedValue: '=' 
     }, 
     link: function (scope, elem, attrs) { 
      scope.countries = [{ 
       name: 'Vereinigte Arabische Emirate', 
       value: 'AE' 
      }, { 
       name: 'Andorra', 
       value: 'AD' 
      }, ]; 
      scope.selectedValue = scope.countries[1]; 
     } 
    }; 
}); 

regolatore principale:

app.controller('MainCtrl', function($scope) { 

    $scope.country={}; 

}) 

Markup:

<div ng-controller="MainCtrl"> 
<sel selected-value="country"></sel> 
{{country}} 
</div> 

Esempio di lavoro: EXAMPLE