Strange ng-model behavior inside ng-repeat
- by Mike Fisher
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.
