CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatangular-ngmodel
rajugaadu
rajugaadu

Reputation: 714

Angular JS: Unable to set value to ng-model variable inside ng-repeat

  1. I have the below code that is working fine. That is, it is displaying the combobox with Country names in it and when I select a country in the combobox it prints the "Filter Data: "

        <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click=""><i class="glyphicon glyphicon-globe"></i>&nbsp;Country</button>
        <select class="form-control" style="width:200px;" ng-model="filters" ng-options="country.name for country in countries"></select>
    </span>

    Filter Data: {{filters}}

</div>

    In the above code, I declared a scope variable using ng-init="filters" ( not through the Controller ) and I am trying to set the selected combo item to this variable. It worked fine.

  2. I have then replaced the above code with the following ng-repeat code:

        <span ng-repeat="filter in filterList">
        <button type="button" class="btn btn-default" style="width:75px" ng-click="">{{filter.filterLabel}}</button>

        <span ng-switch="filter.filterType">
            <span ng-switch-when="combo"><select class="form-control" style="width:200px" ng-model="filters" ng-options="country.name for country in filter.countryData"></select></span>
        </span>
    </span>

    Filter Data: {{filters}}

</div>

    The above code though displays the country names in the combobox, when I select a country it doesn't display anything near "Filter Data". I thought may be the scope variable "filters" isn't visible near ng-repeat ( just a guess ) and hence also tried which also didn't work.

Questions:

  1. Can you help me understand why the ng-model="filters" is not setting the scope variable 'filters' and letting me print it?

  2. I would also like to dynamically create the variable name in ng-model. Something like ng-model="filters.{{filter.filterType}}". I tried it but never got any results. It was not displaying the {{filters}}. After going through some posts on Stackoverlow I tried ng-model="filters.[filter.filterLabel]". This actually through some JS errors ( saying TypeError: Cannot set property 'Country' of undefined) when I selected an item in the country combo. It seems it wasn't able to find Country ( which is result of [filter.filterLabel] ) inside filters. So there is obviously something quite wrong with the way I am declaring the ng-model.

With the above code ( where I want to use the scope variable ng-init="filters" ), can you help me the correct way to dynamically generate the ng-model variable names for the item selected and be able to use {{filters}}

UPDATE:

Here is the Fiddle to demonstrate my problem: http://jsfiddle.net/ramarajuv/ag2crnk7/ Please help me by correcting it.

Thank you all in advance.

Upvotes: 3

Views: 2991

Answers (1)

rajugaadu
rajugaadu

Reputation: 714

Got it working.

  1. First, created filters variable in the scope of the controller:

    $scope.filters = {
    "Country":{},
    "President of Country":{}
};

  2. Then, formatted ng-model as:

    ng-model="filters[filter.filterMap]

Upvotes: 2

Related Questions