Iterate config array в html-шаблоне через угловые директивы?

Question

Недавно я пришел в AngularJS и попытался создать регистрационную форму, где я бы заполнил список стран из моей конфигурации JavaScript, которая широко используется в другом месте, поэтому я сохраняю ее как объект JS.

Я пытаюсь использовать ng-repeat-start и * -end на моем входе select, но он терпит неудачу.

Главный вопрос: как мне загрузить массив стран и повторить его в моем шаблоне?

Edit: 30.11.2014 - Лучшие примеры

HTML:

<div class="form-group"> 
       <label for="phone">Country</label> 
       <select-country ng-model="credentials.country"></select-country> 
       <pre>{{credentials.country}}</pre> 
      </div> 

Файл:

/public/directives/countrySelector.directive.js

содержание Директива:

'use strict'; 

angular.module('app', []) 
.value('countries', [ 
    {name: 'Afghanistan', code: 'AF'}, 
    {name: 'Åland Islands', code: 'AX'} 
]) 
.directive('selectCountry', ['countries', function (countries) { 
    function link (scope, element, attrs) { 
     scope.countries = countries; 
    } 

    return { 
     template: '<select ng-options="country[1] as country[0] for country in countries"' + 
     '  ng-model="credentials.country">' + 
     '</select>', 
     link: link, 
     scope: { 
      credentialsCountry: '=' 
     } 
    }; 
}]); 

Answer 1

Я не думаю, что вам нужно создать новую директиву для этого. Существует уже встроенная в select директива для углового, поэтому вы делаете больше работы для себя, чем необходимо. Итак, что вы может do - это ввести эту услугу в ваш контроллер для страницы, а затем привязать службу к сфере действия контроллера, как и для этой директивы. Это будет в конечном итоге выглядеть примерно так:

angular.module('app', []) 
.value('countries', [ 
    {name: 'Afghanistan', code: 'AF'}, 
    {name: 'Åland Islands', code: 'AX'} 
]); 

и у вас есть контроллер

app.controller('whateverTheControllerIs', ['countries', '$scope', function (countries, $scope) { 
    $scope.countries = countries; 
}); 

, а затем ваша сфера доступна для шаблона

<div class="form-group"> 
    <label for="phone">Country</label> 
    <select ng-options="country.name for country in countries" ng-model="credentials.country"></select> 
    <pre>{{credentials.country}}</pre> 
</div> 

В качестве примечания:, если вы хотите узнать о лучших практиках для последней версии Angular 1. *. Прочитайте все, что говорит Тодд Мотто.

Answer 2

Это хорошая идея создать директивы для вещей, которые можно было бы часто использовать повторно, например, селектор страны. Вы хотите ввести свой countries в директиву, где затем вы можете перебрать его с помощью ng-options. Plunker: http://plnkr.co/edit/zfkeLNQ0LHxR7FB0nM18?p=preview

.directive('selectCountry', ['countries', function (countries) { 
    var directive = { 
    template: '<select ng-options="country[1] as country[0] for country in countries"' + 
       '  ng-model="ngModel">' + 
       '</select>', 
    link: link, 
    scope: { 
     ngModel: '=' 
    } 
    }; 

    return directive; 

    function link (scope, element, attrs) { 
    scope.countries = countries; 
    } 
}]); 

Answer 3

просто заменить country[0] и country[1] с country.code и country.name

http://plnkr.co/edit/OIGGitze5LLehDes2MQ8?p=preview или я что-то пропустил?