I have a table with fields from ng-repeat. I have added two extra field such as a input and a button to each row.
What i want is when i enter some value in input and press button i want to run a function with the value of corresponding input. How do i do that?
My View
<tr ng-click="" ng-repeat='customer in customers | filter:query | orderBy: sort.field : sort.order'>
<td ng-repeat='field in fields'>
{{customer[field]}}
</td>
<td>
<input class="form-control" name="debit" type="text">
</td>
<td>
<button ng-click="genEcs(customer['id'])" class="btn btn-primary btn-sm" >ECS</button>
</td>
</tr>
My controller
$scope.genEcs=function(id){
}
You need to assign a model to your input via ng-model attribute. The model would be defined in the scope of each customer of ng-repeat, because ng-repeat creates child scopes:
So, you could do this:
<tr ng-repeat='customer in customers>
<td>
<input class="form-control" ng-model="customersDebit" name="debit" type="text">
</td>
<td>
<button ng-click="genEcs(customer, customersDebit)">ECS</button>
</td>
</tr>
(I also suggest, for the sake of readability and separation of concerns, to pass the entire customer object to the genEcs function, rather than only the id field. The less your View knows about business logic, the better.)
Related
I have a table that's populated with records from an object retrieved from a service captured using AngularJS. I have checkbox in the table that enables that row to be edited. Within the row, I have a select box that I need to have its default value set to the original value in the row when I click the "Edit" checkbox in the row while still populating the select with all the other values from which to choose.
Below is the code that's populating the table and the select box.
<thead>
<tr>
<th class="col-lg-2">Sub Program</th>
<th class="col-lg-6">Description</th>
<th class="col-lg-2">Program</th>
<th class="col-lg-1">Edit</th>
<th class="col-lg-1">Update/Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="timeAllocationSubProgram in timeAllocationSubPrograms">
<td ng-hide="checked">{{timeAllocationSubProgram.subProgramName}}</td>
<td ng-hide="checked">{{timeAllocationSubProgram.subProgramDescription}}</td>
<td ng-hide="checked">{{timeAllocationSubProgram.programName}}</td>
<td ng-show="checked">
<input class="form-control" value="{{timeAllocationSubProgram.subProgramName}}"
ng-model="timeAllocationSubProgram.subProgramName" />
</td>
<td ng-show="checked">
<input class="form-control" value="{{timeAllocationSubProgram.subProgramDescription}}"
ng-model="timeAllocationSubProgram.subProgramDescription" />
</td>
<td ng-show="checked">
<select class="form-control" ng-options="timeAllocationProgram as timeAllocationProgram.programName
for timeAllocationProgram in timeAllocationPrograms track by timeAllocationProgram.programName" ng-model="timeAllocationProgram"
ng-change="selectProgram(timeAllocationProgram)"></select>
</td>
<td>
<input type="checkbox" ng-model="checked" aria-label="Toggle ngShow"/>
</td>
<td>
<button class="btn btn-xs btn-primary" ng-click="editTimeAllocationSubProgram(timeAllocationSubProgram)"
ng-show="checked">
Update
</button>
<button class="btn btn-xs btn-primary" ng-click="deleteTimeAllocationSubProgram(timeAllocationSubProgram)"
ng-hide="checked">
Delete
</button>
</td>
</tr>
</tbody>
</table>
With my humble experience, the best way to set default value to inputs linked to ng-model in Angular, is simply setting the default value to the ng-model.
ng-options is here remplacing
<options ng-repeat="timeAllocationProgram in timeAllocationPrograms">
Consequently, if timeAllocation (as it's what is written in ng-model directive) is set to the default value you want when you load the data from the service, it should display it right.
The subject seems to have been already answered as well, here's the link, with a plunker :
how to use ng-option to set default value of select element
I want to make validations on table rows , I am doing in the following way but its not working.
I want to apply it on click of save button at lst.
I have 5 columns and want to apply validation for each column Suppose if any field is empty I want to disable the button.
Can anybody help?
<div class="mainDiv" ng-if="currentForm != ''">
<table class="mappingTable">
<tr>
<th>#</th>
<th>CommCare Question</th>
<th>Data Element</th>
<th>Category Option Combo</th>
<th>Frequency/Period</th>
<th>Facility Identifier</th>
</tr>
<tr ng-repeat="mappingElement in formIdMetadataMappingToObjectMap[currentForm.unique_id].mappingElements">
<td class="serialNoCell">{{$index+1}}.</td>
<td title="{{mappingElement.commcareQuestion}}" class="commcareQuestion">{{mappingElement.commcareQuestionDescription}}</td>
<td class="dhisDe"> <input type="text"
name="foo"
class="form-control"
ng-model="mappingElement.dataElement"
ng-class="{ error: !mappingElement.dataElement }"
placeholder="{{'please_select_data_element'}}"
uib-typeahead="dataElement as dataElement.name for dataElement in dataElements | filter:$viewValue | limitTo:20"
uib-typeahead-focus-first="false"
uib-typeahead-editable=false
ng-blur="updateCategoryCombo(this.mappingElement)"
/></td>
<td class="dhisCC"><input type="text"
name="foo"
class="form-control"
ng-model="mappingElement.categoryCombo"
ng-class="{ error: !mappingElement.categoryCombo }"
placeholder="{{'please_select_categorycombo'}}"
uib-typeahead="categoryComboOption as categoryComboOption.name for categoryComboOption in categoryComboInputHolder[currentForm.unique_id+mappingElement.commcareQuestion] | filter:$viewValue "
uib-typeahead-focus-first="false"
uib-typeahead-editable=false
/></td>
<td class="dhisPeriod"><input type="text"
name="foo"
class="form-control"
ng-model="mappingElement.period"
ng-class="{ error: !mappingElement.period }"
placeholder="{{'please_select_period'}}"
uib-typeahead="period as period.name for period in periods | filter:$viewValue | limitTo:20"
uib-typeahead-focus-first="false"
uib-typeahead-editable=false
/></td>
<td class="dhisOuIdentifier"><input type="checkbox" ng-model="commcareQuestionToOrgUnitIdentifierMap[currentForm.unique_id+mappingElement.commcareQuestion]" ng-click="doOrgUnitUIOperations(this);" ng-disabled="!commcareQuestionToOrgUnitIdentifierMap[currentForm.unique_id+mappingElement.commcareQuestion]&&formIdToIsOrgUnitIdentifierPresentMap[currentForm.unique_id]"></td>
</tr>
</table>
<div>
<button type="button" ng-disabled="!mappingElement.categoryCombo || !mappingElement.dataElement || !mappingElement.period" ng-click="saveMetadataMapping()">{{'Save'}}</button>
</div>
</div>
One thing that could be wrong here is that the button is outside of the ng-repeat's scope. So it doesn't know about mappingElement.
If you want validation on each row separately add the button inside a column,
otherwise you can create a function in the controller to iterate the formIdMetadataMappingToObjectMap[currentForm.unique_id].mappingElements collection and search for empty values, then you can simply add it to the button ng-disabled="validationFunc()".
I have a service table in database with 5 rows and I'm displaying it through ng-repeat. I want to select only one checkbox value
<tbody>
<tr data-ng-repeat="serviceTable in dataTable ">
<td> {{ serviceTable.serviceId }} </td>
<td> {{ serviceTable.serviceName }} </td>
<td> {{ serviceTable. amount }} </td>
<td><input type="checkbox" ng-model="?????"></td>
</tr>
</tbody>
How do I bind only one value in ng-model???
Just like that:
<input type="checkbox" ng-model="item.yourBoolValue">
You can also provide two additional directives to use specific values for checked and unchecked style:
<input type="checkbox" ng-model="item.checkValue" ng-true-value="1" ng-false-value="0">
Edit:
I didn't understand the question at first.
Don't you want to use radio buttons for that?
<input type="radio" name="radioGroupName" ng-model="item.boolValue" />
They provide you with the ability to select only 1 item out of your group (thats why you have to set the name property) without any additional logic.
I'm trying to do form validation with Angular. The problem is that my form's inputs are within a ng-reapeat and they have the same name. So if one required field is not filled, the others are also shown as not valid.
To workaround this, I've used an inner ng-form as shown below. But the validation is not triggered.
Any idea what I'm doing wrong ?
<form name="referenceForm" >
<table>
<tbody ng-repeat="ref in vm.references | filter:{type: 'ReferenceUrl'}">
<ng-form name="urlForm">
<tr>
<td>
<input name="urlName" type="text" ng-model="ref.reference.urlName" ng-disabled="ref.reference.isScreenDeleted" required />
<span ng-show="urlForm.urlName.$error.required">*</span>
</td>
<td>
<input name="shortName" type="text" ng-model="ref.reference.shortName" ng-disabled="ref.reference.isScreenDeleted" required />
<span ng-show="urlForm.shortName.$error.required">*</span>
</td>
<td>
<a class="btn grid-button grid-edit-row btn-danger" ng-if="!ref.reference.isScreenDeleted" ng-click="toggleDelete(ref.reference)"><i class="fa fa-trash-o"></i></a>
<a class="btn grid-button grid-edit-row btn-info" ng-if="ref.reference.isScreenDeleted" ng-click="toggleDelete(ref.reference)"><i class="fa fa-refresh"></i></a>
</td>
</tr>
</ng-form>
</tbody>
</table>
</form>
It is not a good idea to put something in the table that is not inside .
Never know how it will work out.
Place ng-form as an attribute on tag instead.
So you should replace this:
<tbody ng-repeat="ref in vm.references | filter:{type: 'ReferenceUrl'}">
<ng-form name="urlForm">
With this:
<tbody ng-repeat="ref in vm.references | filter:{type: 'ReferenceUrl'}" ng-form="urlForm">
I have created a table from 2 different arrays in AngularJS that contain employees name and services and rest of the cells contain Checkboxes now I want get the ID's of selected Checkboxes that I have created another array in the controller,
but the view allows me to select only one Checkbox from many in the row
here is my Html
<form ng-submit="save()">
<table border="1">
<tr>
<td><strong>Services</strong></td>
<td ng-repeat="e in PBA">{{e.Name}}</td>
</td>
<tr ng-repeat="(index,i) in SOB">
<td>{{i.Name}}</td>
<td ng-repeat="e in PBA track by $index">
<input type="checkbox" name="cb" ng-true-value="{{e.Id}}_{{i.Id}}" ng-model="ids[index]" />
</td>
</tr>
</table>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" />
</div>
</form>