3

  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.

rajugaadu
  • 686
  • 2
  • 17
  • 37
  • As per the docs, you should not be using ng-init unless aliasing a property for ngRepeat. If the ng-init is not on an ng-repeat, I would put the filters model in the scope instead. "_The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope._" – Brennan Aug 12 '14 at 17:00
  • 3
    always use a `dot` in `ng-model`. `ng-repeat` creates child scopes and you are probably losing inheritance of a primitive – charlietfl Aug 12 '14 at 17:01
  • http://stackoverflow.com/questions/18342917/angularjs-ng-model-doesnt-work-inside-ng-if I think it's quite the same for ng-switch +1 @charlietfl – Whisher Aug 12 '14 at 17:43
  • Hi ... To put my question better, I created the fiddle: http://jsfiddle.net/ramarajuv/ag2crnk7/. Could you please help me by correcting it? – rajugaadu Aug 12 '14 at 18:12
  • @charlietfl would you mind correcting the code that I provided in the fiddle? – rajugaadu Aug 12 '14 at 18:25
  • I think I found the mistake I was doing. I was using ng-model="filters.[filter.label]". The dot was not needed here. It's just ng-model="filters[filter.label]". The fiddle was then working in both cases – rajugaadu Aug 12 '14 at 20:05

1 Answers1

2

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]
twknab
  • 1,741
  • 1
  • 21
  • 35
rajugaadu
  • 686
  • 2
  • 17
  • 37
  • Of all the other answers on stack, for some reason this one helped me the most. Thanks for adding in this last line here, I was finally able to get my `ng-model` that was nested in an `ng-repeat` to work. Now just need to figure out how to get my multiple iterations of comment boxes to not have the same content of my initialized `ng-model` variable...+1 and thank you! – twknab Feb 20 '17 at 23:40