Ibrahim Shaikh Ibrahim Shaikh - 1 month ago 6
AngularJS Question

use ng-model and value together angularjs c#

I am Creating a web app with C# and i am using angularjs for database

i have a table which is fetching the data from database and last table head have 2 buttons (

update and delete
)

One for Opening the Model

<table class="table table-bordered font" style="width: 110%;">
<tr class="bg-primary">
<th>Id</th>
<th>Zone</th>
<th>Location</th>
<th>VenueName</th>
<th>Venue</th>
<th>date</th>
<th>brandname</th>
<th>starttime</th>
<th>endtime</th>
<th>hrs</th>
<th>program</th>
<th>Assign_Trainer</th>
</tr>
<tr ng-repeat="x in sonvinrpm" ng-model="sonvinrpm">
<td>{{x.Id}}</td>
<td>{{x.Zone}}</td>
<td>{{x.Location}}</td>
<td>{{x.VenueName}}</td>
<td>{{x.Venue}}</td>
<td>{{x.Date}}</td>
<td>{{x.BrandName}}</td>
<td>{{x.StartTime}}</td>
<td>{{x.EndTime}}</td>
<td>{{x.HRS}}</td>
<td>{{x.Program}}</td>

<td>
<button type="button" ng-click="updatefunction(x)" data-target="#myModal1" data-toggle="modal" class="btn btn-sm btn-primary active" data-toggle="modal"><i class="glyphicon glyphicon-pencil"></i></button>
<button type="button" ng-click="getassigntrainerdata(x)" class="btn btn-sm btn-danger active" data-toggle="modal" data-target="#assigntrainermodel"><i class="glyphicon glyphicon-remove-sign"></i></button>
</td>
</tr>
</table>


when i click on this
update button
, model is poped up and show me data like

<div class="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Update Modal</h4>
</div>
<div class="modal-body">
<input type="text" style="margin-left:5%;" ng-model="addtionalname" value="{{addname}}" placeholder="Additional Name" Text="" Height="30" />
<input type="text" style="margin-left:5%;" ng-model="addtionalmobile" value="{{addmobile}}" placeholder="Additional Mobile" Text="" Height="30" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="update()">Update</button>
</div>
</div>

</div>
</div>

</div>


and then when i click on update (the data should be updated)

now the problem is i cannot use ng-model and value together like
<input type="text" style="margin-left:5%;" ng-model="addtionalname" placeholder="Additional Name" Text="" Height="30" />
<input type="text" style="margin-left:5%;" ng-model="addtionalmobile" placeholder="Additional Mobile" Text="" Height="30" />


if i use the textbox with ng-model, the value enter by me is updated but i want to see what is the previous value of the textbox is now when i use value

<input type="text" style="margin-left:5%;" value="{{addname}}" placeholder="Additional Name" Text="" Height="30" />
<input type="text" style="margin-left:5%;" value="{{addmobile}}" placeholder="Additional Mobile" Text="" Height="30" />


previous value is set in this textbox but i cant update this because for updating this i need ng-model and for the previous value i need value but i need to use both

Answer

You can use it like this in both the textboxes, it will work

<input type="text" style="margin-left:5%;" ng-init="addtionalname'{{addname}}'" ng-model="addtionalname" value="{{addname}}" placeholder="Additional Name" Text="" Height="30" />