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.
Angular seems to think that report.options.filters[filter.value]
is not defined.
You could initialize it. Either do it in controller or using ngInit
:
<div ng-repeat="filter in lists.filters"
ng-init="report.options.filters[filter.value]=
report.options.filters[filter.value]||{}">
<input type="checkbox" ng-model="report.options.filters[filter.value]['type']" />
<input type="text" ng-model="report.options.filters[filter.value]['values']" />
</div>
See, also, this short demo.
The above code assumes that $scope.report.options.filters
is initialized.
If not, you should initialize it as well.