CODEWITHSUNDEEP
angularjsangularjs-directive
C1pher
C1pher

Reputation: 1972

AngularJS Directive Template for Select and Ng-Options

I am having trouble trying to turn the following html snippets into equivalent templates in a pair of directives.

<select ng-model="address.country" ng-change="address.division=null"
        ng-options="countryId as countryDetails.label for (countryId, countryDetails) in countries"></select>
<select ng-model="address.province" 
        ng-options="divisionId as divisionDetails.label for (divisionId, divisionDetails) in countries[address.country]['divisions']"></select>

The countries variable has the following structure:

countries = {
    "": {
        label: "",
        divisions: {
            "": {label: ""}
        }
    },
    "Canada": {
        label: "Canada",
        divisions: {
            "": {label: ""},
            "Alberta": {label: "Alberta"},
            "British Columbia": {label: "British Columbia"},
            etc . . .
        }
    },
    "United States": {
        label: "United States",
        divisions: {
            "": {label: ""},
            "Alabama": {label: "Alabama"},
            "Alaska": {label: "Alaska"},
            etc . . .
        }
};

Using the following as a template in my directive created a drop-down list, but it had no values in it. The list of countries is defined in the javascript file where the directives are a global var and country is defined in the directive scope to be the string value of the matching attribute.

template: '<select ng-options="divisionId as divisionDetails.label for (divisionId, divisionDetails) in countries[{{country}}]['divisions']" ></select>',

Upvotes: 2

Views: 5737

Answers (2)

Mark Peterson
Mark Peterson

Reputation: 570

You could use a filter

"ng-options" => "model as (model | modelAsSelectOption) for model in collection"

.filter 'modelAsSelectOption', ->
  return (model) ->
    "#{model.name} - #{model.type} (#{model.otherinfo})"

I'd prefer a template for the options too, but, this does the trick.

Upvotes: 2

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

I would use ng-repeat key + value.

HTML

<select ng-model="selectedmodel">
    <option ng-repeat="(key,val) in countries">{{val.label}}</option>
</select>  

<select >
    <option ng-repeat="(key,val) in countries[selectedmodel].divisions">{{val.label}}</option>
</select>

JS

$scope.countries = {
    "Hartabarta": {
        label: "Hartabarta",
        divisions: {
            "": {label: ""}
        }
    },
    "Canada": {
        label: "Canada",
        divisions: {
            "": {label: ""},
            "Alberta": {label: "Alberta"},
            "British Columbia": {label: "British Columbia"}           
        }
    },
    "United States": {
        label: "United States",
        divisions: {
            "": {label: ""},
            "Alabama": {label: "Alabama"},
            "Alaska": {label: "Alaska"}            
        }
    }
};

$scope.selectedmodel = 'Canada';

Demo Fiddle

Hope this is what you want.

Upvotes: 1

Related Questions