Iterate config array in html template via Angular directives?
I recently came to AngularJS and tried to create a registration form where I would populate a list of countries from my JavaScript configuration which is widely used elsewhere, so I save it as a JS object.
I am trying to use ng-repeat-start and * -end on my select input, but it is failing.
The main question is, how do I load an array of countries and iterate over it in my template?
Edit: 11/30/2014 - Better examples
HTML:
<div class="form-group">
<label for="phone">Country</label>
<select-country ng-model="credentials.country"></select-country>
<pre>{{credentials.country}}</pre>
</div>
File:
/public/directives/countrySelector.directive.js
Directive content:
'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: '='
}
};
}]);
source to share
I don't think you need to create a new directive for this . There is already a built-in select directive for angular, so you are doing more work for yourself than necessary. So what you could do is inject this service into your controller for the page, and then bind the service to the controller scope as you did for this directive. It ends up looking something like this:
angular.module('app', [])
.value('countries', [
{name: 'Afghanistan', code: 'AF'},
{name: 'Åland Islands', code: 'AX'}
]);
and you have a controller
app.controller('whateverTheControllerIs', ['countries', '$scope', function (countries, $scope) {
$scope.countries = countries;
});
and then your scope is available to the template
<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>
As a side note: if you want to know the best practices for the latest Angular 1. *. Read everything Todd Motto has to say.
source to share
just replace country[0]
both country[1]
with country.code
andcountry.name
http://plnkr.co/edit/OIGGitze5LLehDes2MQ8?p=preview or am I missing something?
source to share
It is a good idea to create directives for things that could be reused, like the country selector. You want to inject yours countries
into a directive where you can iterate over it with 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;
}
}]);
source to share