Strange ng-model behavior inside ng-repeat

Posted by Mike Fisher on Stack Overflow See other posts from Stack Overflow or by Mike Fisher
Published on 2014-06-09T20:58:36Z Indexed on 2014/06/09 21:24 UTC
Read the original article Hit count: 418

Filed under:
|

I'm trying to build up a complex post request to run a report in my Angular app.

I have a list of inputs all dynamically generated via an ng-repeat a simple version of my html looks like this.

<div ng-repeat="filter in lists.filters">
    <input type="checkbox" ng-model="report.options.filters[filter.value]['type']/>
    <input type="text" ng-model="report.options.filters[filter.value]['values']/>
</div>

ng-repeat is looping over this array

[
      {name: 'Advertisers',           value: 'advertisers'},
      {name: 'Sizes',                 value: 'sizes'},
      {name: 'Campaign IDs',          value: 'campaigns'},
      {name: 'Creative IDs',          value: 'creatives'},
      {name: 'Publishers',            value: 'publishers'},
      {name: 'Placement IDs',         value: 'placements'},
      {name: 'Seller Types',          value: 'seller_types'},
      {name: 'Impression Types',      value: 'impression_types'},
      {name: 'Bid Types',             value: 'bid_types'},
      {name: 'Seller Members',        value: 'seller_members'},
      {name: 'Buyer Members',         value: 'buyer_members'},
      {name: 'Insertion Order Ids',   value: 'insertion_orders'},
      {name: 'Countries',             value: 'countries'},
      {name: 'Site Ids',              value: 'sites'},
      {name: 'Sources',               value: 'sources'}
    ];

The JSON I'm sending back needs to be structured like this:

"filters": {
    "state": "all",
    "campaigns": {type:"include", values":[1,2]},
    "creatives": {type:"exclude","values":[1,2]},
    "publishers": {"values":[1,2]},
    "placements": {type:"exclude",values":[1,2]},
    "advertisers": {"values":[1,2]},
    "sizes": {"values":[1,2]},
    "countries": {"values":[1,2]},
    "insertion_orders": {"values":[1,2]},
    "sites": {"values":[1,2]},
    "bid_types": {"values":[1,2]},
    "seller_types": {"values":[1,2]},
    "impression_types": {"values":[1,2]},
    "seller_members": {"values":[1,2]},
    "buyer_members": {"values":[1,2]},
    "sources": {"values":[1,2]}
}

When I do this Angular throws an error: 'Cannot set property 'values' of undefined' and 'Cannot set property 'type' of undefined'

Yet if I do this (inside ng-repeat)

<input type="text" ng-model="report.options.filters[filter.value]/>

Or this outside of ng-repeat

<input type="text" ng-model="report.options.filters[filter.value]['values']/>

No errors are thrown and everything works fine. I'm positive that filter.value is defined and available on the scope even though Angular thinks it's not for some reason.

I'm not quite sure what I'm doing wrong. Any help is much appreciated.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about angularjs