I am fairly new to Angular JS and I have run into a problem. I am creating a dynamic form where the elements come from the Database for example: order object:
public int Id { get; set; }
public string LenderName { get; set; }
public PropertyModel Property { get; set; }
PropertyModel Object:
public string Zip{ get; set; }
public string State { get; set; }
I was successfully able to dynamically bind ng-model for single level deep property like Example for Order.LenderName my input element is:
<input type="text" ng-model="order[element.ModelName]"></input>
this perfectly binds to the $scope.order.LenderName
Note: element.ModelName = "LenderName" or rather I could say the order property name
my sample code is below:
<div ng-repeat="element in eventSchemaElementList">
<div ng-switch="element.FieldTypeCode">
<div class="topBottomPadding">
<div class="col-sm-2 alignRight">
<label>{{element.SchemaFieldName}}:</label>
</div>
<div ng-switch-when="TextBox" class="col-sm-10">
<input type="text" ng-model="order[element.ModelName]" />
</div>
<div ng-switch-when="TextArea" class="col-sm-10">
<textarea ng-model="order[element.ModelName]"></textarea>
</div>
</div>
</div>
</div>
In the above code I am not able to figure out How I can dynamically bind Order.Property.State to ng-model. the above code works only for one level deep. I am not sure how to do it for order.Property.State I also tried doing this:
<input type="text" ng-model="order[element.ModelName]" />
Where element.ModelName = Property[State]
I also tried hardcoding it as order[Property[State]] in the input still did not work
<input type="text" ng-model="order[Property[State]]" />
For the above ones It does not bind to the order.Property.State but it creates a new property as Property[State]. It is really confusing because I have objects that go 4 or 5 level deep.
Help or suggestions will be really appreciated thanks in Advance !!!
