AngularJS to replace textbox value with expression with a function call - angularjs

I have an Angular form where ng-repeat is used to create several TDs and each TD element holds a textbox whose value I want to modify using a function call with parameter. I hold values in an array and want to pick a value from there and put in textbox element.
<div ng-controller="MyController" ng-form id="myForm" name="myForm">
<table>
<tr>
<td ng-repeat="myObject in arrayOfObjects">
<input type="text" ng-???="{{ myFunctonCall(myObject.Property) }}" />
</td>
</tr>
</table>
</div>
Is there a standard ng directive or it can be achieved using formatters, parsers?

You can use ng-init to initialize a scope value inside each child scope of ng-repeat. Those values won't be shared with your parent controller, where arrayOfObjects is defined.
https://docs.angularjs.org/api/ng/directive/ngInit
(as said in the doc, do not use too much ngInit)
<div ng-controller="MyController" ng-form id="myForm" name="myForm">
<table>
<tr>
<td ng-repeat="object in arrayOfObjects">
<input type="text"
ng-init="value = myFunctionCall(object.Property);"
ng-model="value" />
</td>
</tr>
</table>
</div>

as #Deblaton Jean-Philippe said you can use ng-model to read the data
<input type="text" ng-model="myinitialvalue" />
then process it in the controller the way you want:
$scope.$watch('myinitialvalue' function(newval, oldval){
//newval is equal to value of myinitialvalue
//here we modify it and assign to myvar, here for example we just add 'abc' to it
$scope.myvar = newval + 'abc';
});
and angular template syntax {{myvar}} to show it in textarea or in some other place if the page:
<textarea>{{myvar}}</textarea>

Related

Angular ng-class does not work on invalid value in the field

I have the an Angular code as below. When I input a character in the text box, it is supposed to apply ng-class "error" in the div(parent) tag. This does not work.
Any idea what the issue is?
Code:
<ng-form name="innerForm">
<table>
<tbody>
<tr ng-repeat="value in values>
<td>
<div class="control-group input-append no-margin" ng-class="{error: innerForm.val_{{$index}}.$invalid}">
<input name="val_{{$index}}" id="val_{{$index}}" ng-model="value.val" ng-class="{edited: innerForm.val_{{$index}}}.$dirty"
type="text" ng-pattern="/^\d*\.?\d{0,2}$/" ng-required />
</div>
</td>
</tr>
</tbody>
</table>
</ng-form>
Here is an example. When I enter a alphabet, it is supposed to through a background color around the text box. But it does not happen. http://embed.plnkr.co/cchyQYE69lnkjEqUNGGv/
The problem is that you're mixing Angular template {{}} with an already-expressionable syntax. Correct the usage of ng-class like this:
ng-class="{error: innerForm['val_' + $index].$invalid}"
and
ng-class="{edited: innerForm['val_' + $index].$dirty}"
ng-class expect expression, it doesn't process {{}}(interpolation) directive, if in case you pass {{expression}}, then you will see an error. You have to correct your ng-class expression to below.
ng-class="{error: innerForm['val_'+ $index].$invalid}"
ng-class="{edited: innerForm['val_'+ $index].$dirty"

Initialize two values with an if in template-django

I have a condition where I need to display values depending on an if condition. Below is my template code.
Template:
<td>
<label>Review Title/Purpose*</label>
</td></br>
<div ng-if="title1 == true">
<td>
<input type="text" class="col-md-10" maxlength="256" ng-show="title1" ng-model="arform.revtitle"><required/>
</td></div>
<div ng-if="title1 != true">
<td><input type="text" class="col-md-10" maxlength="256" ng-show="!title1" ng-init="'{{reviewtit}}'" ng-model="arform.revtitle"><required/>
</td></div>
The value in ng-init="'{{reviewtit}}'" is the value I get from Views. Where as the value in ng-show="title1" is the value I get from controller.
I just wanted to know is it right to use ng-show in the different ways I mentioned?

ng-model in ng-repeat - how to send values to server

im using ng-repeat to create dynamic number of textboxs.
<div class="orgevent" ng-repeat="i in getNumber(numOfEvents) track by $index">
<input class="dest" type="text" value="Free text" ng-model="i.freeText">
</div>
i want (on click) to take the values that the user write in the textBox and send it to the server,
how can i do it?
i tried to take it in the JS by ng-model but the value is always "undefined"
You can use ng-model as array and read it on click. Take a look
http://jsfiddle.net/ucskyv67/74/
app.controller("cookieCtrl", function ($scope, $cookies) {
$scope.numbers= [1,2,3,4,5,6];
$scope.userVals=[];
$scope.getVal= function(){
console.log($scope.userVals);
}
});
<div ng-app="cookieApp" ng-controller="cookieCtrl">
<div class="orgevent" ng-repeat="i in numbers track by $index">
<input class="dest" type="text" value="Free text" ng-model="userVals[$index]">
</div>
<button ng-click="getVal()">Read</button>
</div>
one option is to add ng-change to your input and implement a method in your controller to call the server-
<input ng-change="handleChange(i.freeText)" class="dest" type="text" value="Free text" ng-model="i.freeText">

Angular record not binding through directive

I am creating a form which you can add multiple columns which maps to an array.
An example of the record model looks like this
record = {'template_name' => 'name', 'detail_section_header' => ['Name', 'Date', 'Assigned To'}
Currently, i'm doing it like this
html:
<form>
<div class="x-label">Name</div>
<input type="text" placeholder="Name" ng-model="record.template_name" autofocus required />
<table>
<tr>
<thead ng-repeat="i in record.detail_section_header track by $index">
<input type="text" detail-section-header-input index="{{$index}}" />
</thead>
</tr>
... <buttons to add/remove columns which increments and decrements the size of detail_section_header> ...
</table>
</form>
directive in coffeescript:
angular.module('xtiri').directive 'detailSectionHeaderInput', ->
link: ($scope, el, attrs) ->
el.on('keyup', ->
$scope.record.detail_section_header[attrs.index] = el.val()
)
What is currently happening is that array (detail_section_header) doesn't populate during the key-up to the bound model (record) until I change another field in the bound model, like the template_name, then it updates. I'm guessing this has something to do with when it digests? Any suggestions on how to make that array populate instantly after typing?
Angular already has ngModel for binding to input elements, so you don't need a custom directive.
Here's how you should use ngModel to handle two-way binding:
<thead ng-repeat="i in record.detail_section_header track by $index">
<input type="text" ng-model="record.detail_section_header[$index]" />
</thead>
Note: Don't try bind to the i variable of the ngRepeat.
For example, this won't do what you expect:
<input type="text" ng-model="i" />
It would be like doing this:
(code just for demo purposes, Angular internals very different)
var detail_section_header = ['Name', 'Date', 'Assigned To'];
var $index = 0;
// This is like using `ng-model="record.detail_section_header[$index]"`
detail_section_header[$index] = 'new value';
// **Correct: **
// We get the expected result,
// `detail_section_header[$index]` has the new value
// This is the equivalent of trying `ng-model="i"`
var i = detail_section_header[$index];
i = newValue;
// **Incorrect:**
// `detail_section_header[$index]` is unchanged

Combobox value isn't captured using ng -model when inside a table generated by ng -repeat (AngularJS)

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.

Resources