I'm using angular with ng-repeat like that:
<tr ng-repeat="(fieldName, fieldValue) in publication">
<td>
<input type="text" ng-value="publication[fieldName]">
</td>
</tr>
But binding doesn't work - so after change I have still old values in publication[fieldName]. How can I achieve binding?
It should be ng-model instead of ng-value if you want a data binding.
Related
I am using the ng-repeat to create the input fields dynamically, everything seems to be working fine and the input fields are created but due to some reason when I enter some value into that created input field then due to two-way data binding the value is entered simultaneously in all the text fields that were created.
As per my knowledge, I am assigning the different ng-model to each of the created fields so I am not sure why the values are being copied. When I try to print the values which are assigned to the input field just above the field then I see the id is different wanted to know why all the fields are taking the same value and also how can I prevent it.
HTML Code:
<tr>
<td ng-repeat="extension in ExtensionList">
<!-- Here the value displayed are different -->
{{ formdata.extension.ExtensionVlaues }}
<input type="text" class="form-control" id="extension.ExtensionVlaues" ng-model="formdata.extension.ExtensionVlaues">
</td>
</tr>
Here is the screenshot from the front-end:
Here is the example of my ExtensionList: {"Field1":"","Field2":"","Field3":1,"ExtensionVlaues":2}
As per my knowledge, the given ng-model is different but still not working. Can anyone please help me with this? I tried few things like ng-model="formdata.extension[ExtensionVlaues]" but still no luck.
I tried to assign ng-model like this but it is not working:
ng-model="formdata.extension[ExtensionVlaues]"
Based on the below answer I tried 2 different things it but it's not working and getting the same issue. Please let me know how can I resolve this:
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata.extension.key">
</td>
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata.extension.ExtensionVlaues">
</td>
You are trying to use ExtensionList as an array. You need to use it as an object with ng-repeat:
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata[extension][key]">
</td>
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata[extension][ExtensionVlaues]">
</td>
Just incase anyone else also struck at this issue:
<span ng-repeat="(key, extension) in ExtensionList" class="form-inline">
<br/>
<span>
{{ extension.NameSpace + ":" + extension.LocalName }}
</span>
<input type="text" class="form-control" id="extension.ExtensionVlaues" ng-model="ExtensionList.extension[key].FreeText" ng-blur="ExtensionText(ExtensionList.extension[key].FreeText, extension.ExtensionVlaues)">
</span>
I have the following view
<tr ng-repeat="item in items">
<td>
<input type="radio" name="{{item.GroupName}}" data-ng-value=" {{item.BooleanValue}}" />
{{bookmark.BooleanValue}}
</td>
The above shows the text value of bookmark.BooleanValue after the radio button as true but the radio button is not selected.
I don need any complex binding to the viewmodel. The requirement is to make a DB call on selection (which I will get to once I can get the binding sorted
Any help?
You use ng-value in conjunction with ng-model. ng-model specifies the property the radio button is bound to and ng-value is the value given to the bound property when that radio button is selected. See the docs.
<tr ng-repeat="item in items">
<td>
<input type="radio" name="{{item.GroupName}}" ng-model="item.BooleanValue" ng-value="true"/>
{{item.BooleanValue}}
</td>
How can i access the dynamic value generated of "name" property in model. Following is the code:
<tbody ng-repeat="que in backgroundInfo.questions">
<tr>
<td>{{que.id}} {{que.text}}</td>
<td>
<input type="radio" name="{{que.id}}" value="Yes" ng-model="backgroundInfo.questions.answer"/>Yes
<input type="radio" name="queid" value="No" ng-model="backgroundInfo.questions.answer"/>No
<textarea name="comment{{que.id}}" ng-model="backgroundInfo.questions.comment[que.id]" rows="2"
cols="45"/>
</td>
</tr>
</tbody>
You are so close
name="{{comment[que.id]}}"
Is this already solved? Because I think if want to have a name like name="comment[1]", the code should be like:
<textarea name="comment[{{que.id}}]" ...
you can remove the ng-model cause I think, it will now work.
Furthermore, you can access the value of your textarea using
angular.element(<name>)
in your controller.
I am using xeditable for editing a table row in angular js. HTML Code is shown below.
<tr ng-repeat="expense in viewModel.expenses">
<td>{{expense.eid}}</td>
<td><span editable-text="expense.billAmt" e-ng-model="editForm.billAmt" e-name="billAmt" e-form="rowform">{{expense.billAmt}}</span></td>
<td><span ng-show="!rowform.$visible">{{expense.split}}</span><input type="text" ng-show="rowform.$visible" class="form-control input-sm" e-ng-model="editForm.split" ng-disabled="true" /></td>
I want to update the 'split' value in last column when the value in 'billAmt' changes. So I add a watch in angularjs but is not updating.
$scope.$watch('editForm.billAmt',function(newValue,oldValue) {
$scope.editForm.split=newValue/$scope.viewModel.members.length;
});
Is there any other way to add a watch while using xeditable?? How can I solve this?
I'd refrain from using $scope.$watch() and turn to a more efficient solution. You can use the e-ng-change directive to fire a function computing new value of $scope.editForm.split every time the billAmt value changes. It would look like this:
<tr ng-repeat="expense in viewModel.expenses">
<td>{{expense.eid}}</td>
<td><span editable-text="expense.billAmt" e-ng-model="editForm.billAmt" e-name="billAmt" e-form="rowform" e-ng-change="checkSplit();">{{expense.billAmt}}</span></td>
<td><span ng-show="!rowform.$visible">{{expense.split}}</span><input type="text" ng-show="rowform.$visible" class="form-control input-sm" e-ng-model="editForm.split" ng-disabled="true" /></td>
And in your controller add function checkSplit():
$scope.checkSplit = function(){
$scope.editForm.split = $scope.editForm.billAmt / $scope.viewModel.members.length;
}
The checkSplit() function is invoked explicitly in a response to a event of value change, whereas $scope.$watch() handler runs on every digest cycle, so you can technically save some performance too.
This is my code
<thead>
<tr>
<th>Id Detalle_Venta</th>
<th>Id Producto</th>
<th>Producto </th>
<th>Cantidad </th>
<th>Direccion </th>
<th>Repartidor </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="det in detalleVenta">
<td>{{det.id_Detalle_Venta}}</td>
<td>{{det.id_Producto}}</td>
<td>{{det.nombre_Producto}} {{det.formato}}</td>
<td>{{det.cantidad}}</td>
<td>{{det.direccion}}</td>
<td>
<select name="test" class="form form-control" ng-model="comboRepartidor" ng-change="escogerRepartidor()">
<option class="form form-control" id="idRepartidor" ng-repeat="rep in repartidores" value="{{rep.id_Repartidor}}">{{rep.nombre}}</option>
</select>
</td>
</tr>
</tbody>
The problem is in this lines:
<select name="test" class="form form-control" ng-model="comboRepartidor" ng-change="escogerRepartidor()">
<option class="form form-control" id="idRepartidor" ng-repeat="rep in repartidores" value="{{rep.id_Repartidor}}">{{rep.nombre}}</option>
</select>
Angular doesn't capture the value of select with the ng-model="comboRepartidor". The event ng-change="escogerRepartidor() shoud be show de combo value but it show Undefined. If I move the combo out of the table works fine. What's the problem?
Edited for clarity:
The problem in this case is that ng-repeat creates child scopes for each item.
comboRepartidor is in the scope of the controller, so when you place <select> outside the table, ng-model will be bound to that scope.
ng-repeat directive creates a number of items, each one having its own scope that inherits from the parent scope. comboRepartidor property in the parent scope will be visible in every one of these child scopes; however, when you change the selection of any of the dropdowns, ng-model of that will assign a property "comboRepartidor" in its own scope.
This is because scopes in angular are based on javascript prototype "inheritance".
See more about that: https://groups.google.com/forum/#!topic/angular/nGCeSXsNcYk
You can fix it, for example, by binding the model to a property in the item "det" of the array detalleVenta.