Is there a way to apply a filter to all inputs or css-syntax selectable set of inputs? I have a lot of inputs and I am trying to add the filter number to each of them.
My current HTML
<table class="table">
<tbody>
<tr>
<td><input type="text" ng-model="value" /></td>
<td><input type="text" ng-model="value" /></td>
<td><input type="text" ng-model="value" /></td>
<td><input type="text" ng-model="value" /></td>
<td><input type="text" ng-model="value" /></td>
</tr>
<tr>
<td><input type="text" ng-model="value" /></td>
<td><input type="text" ng-model="value" /></td>
<td><input type="text" ng-model="value" /></td>
<td><input type="text" ng-model="value" /></td>
<td><input type="text" ng-model="value" /></td>
</tr>
//many more inputs
</tbody>
</table>
To clarify:
I'd like to change
<input type="text" ng-model="value" />
To something with the same result as (without adding the filter manually to each input):
<input type="text" ng-model="value | number:2" />
take a look at this resource - https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D
I would imagine something like this is what you are looking for.
<input type="number" ng-model="value" max="2" min="0" />
If you want to access this input fields validation, you need to wrap it inside a form.
At the bottom of the page that I sent you there is good example
Related
i have data like this:
[{
"id": 1,
"organizationName": "psda",
"organizationNameEN": "psda",
},
{
"id": 1,
"organizationName": "psda",
"organizationNameEN": "psda",
}]
and i want tvalues, this data to my table field values , here is my code:
<tbody ng-repeat="item in arr" >
<tr>
<td><input style="width:25px; height:25px;" type="checkbox" ng-model="chekselct"
cam-variable-name="isItemSelected"
cam-variable-type="Boolean" /></td>
<td><input style="width:140px;" type="text" id="id" value= "{{item.id}}" readonly /></td>
<td><input style="width:305px;" type="text" id="organizationNameEN" value="{{item.organizationName}}" readonly/></td>
<td><input style="width:305px;" type="text" id="organizationNameEN" value="{{item.organizationName}}" readonly/></td>
<td><button type="button" class="btn btn-primary" style="height:25px">details</button></td>
</tr>
</tbody>
AND IT TROWS EXCEPTION Cannot read property 'value' of undefined,
WHAT SHOULD I CHANGE TO MAKE THIS CODE WORK?
Instead of value attribute on input try ng-model
<tbody ng-repeat="item in arr" >
<tr>
<td><input style="width:25px; height:25px;" type="checkbox" ng-model="chekselct"
cam-variable-name="isItemSelected"
cam-variable-type="Boolean" /></td>
<td><input style="width:140px;" type="text" id="id" ng-model="item.id" readonly /></td>
<td><input style="width:305px;" type="text" id="organizationNameEN" ng-model="item.organizationName" readonly/></td>
<td><input style="width:305px;" type="text" id="organizationNameEN" ng-model="item.organizationNameEN" readonly/></td>
<td><button type="button" class="btn btn-primary" style="height:25px">details</button></td>
</tr>
</tbody>
enter code here <tr ng-repeat="item in selectResult track by $index | orderBy : 'itemID'">
<td><input ng-change="addUpdateList(item)" type="text" ng-model="item.siteCode"></td>
<td><input ng-change="addUpdateList(item)" type="text" ng-model="item.itemID"></td>
<td><input ng-change="addUpdateList(item)" type="text" ng-model="item.itemName"></td>
<td><input ng-change="addUpdateList(item)" type="text" ng-model="item.itemAmt"></td>
<td><select ng-options="kitchenPRT_Y for kitchenPRT_Y in item.kitchenPRT_Y" ng-model="item.kitchenPRT_Y"/></td>
</tr>
mssql link
Screen Problems
In the 'mssql', there is only value of y and n. It can be outputed opposite value by using 'ng-options'?
enter code here <tr ng-repeat="item in selectResult track by $index | orderBy : 'itemID'">
<td><input ng-change="addUpdateList(item)" type="text" ng-model="item.siteCode"></td>
<td><input ng-change="addUpdateList(item)" type="text" ng-model="item.itemID"></td>
<td><input ng-change="addUpdateList(item)" type="text" ng-model="item.itemName"></td>
<td><input ng-change="addUpdateList(item)" type="text" ng-model="item.itemAmt"></td>
<%-- <td><select ng-options="kitchenPRT_Y for kitchenPRT_Y in item.kitchenPRT_Y" ng-model="item.kitchenPRT_Y"/></td> --%>
<td><select ng-model="item.kitchenPRT_Y">
<option>Y</option>
<option>N</option>
</select>
</td>
</tr>
I had solve
Getting my head around the ng-table grid. Stuck at the point how to add a new row:
$scope.addRow = function(add) {
$scope.data.push(add)
$scope.showAdd = false;
};
Trying to add the new object to the data array but does not work? what is wrong here?
html:
<table class="noborder">
<tr>
<td rowspan="2">ID: {{add.id}}<input type="hidden" name="id" value="{{add.id}}"></td>
<td>Firstname:</td>
<td><input type="text" name="fn" class="w100" ng-model="add.fn"></td>
<td>Description: </td>
<td>Email:</td>
<td><input type="text" name="em" class="w180" ng-model="add.em"></td>
<td><input type="button" value=" save " ng-click="addRow(p);"></td>
</tr>
<tr>
<td>Lastname:</td>
<td><input type="text" name="ln" class="w100" ng-model="add.ln"></td>
<td><input type="text" name="dc" class="w180" ng-model="add.dc"></td>
<td>Phone: </td>
<td><input type="text" name="ph" class="w120" ng-model="add.ph"></td>
<td><input type="button" value=" cancel" ng-click="cancelEdit()"></td>
</tr>
</table>
Here is a plunkr ref: http://plnkr.co/edit/9woANV?p=preview
In addRow.html you are adding variable 'p' which always evaluates as null. Change this to 'add'.
e.g.
ng-click="addRow(add);"
plunkr: https://plnkr.co/edit/xEL78EZNGrD6GxE029X8?p=preview
I have a view with some inputs in a table row. Is there a way to check if the whole model is valid without using form (can't have form in tr ) ?
<tr ng-controller="SomeCtrl">
<td>
<input type="text" ng-model="someModel.name" required="required" ng-minlength="3">
</td>
<td>
<input type="text" ng-model="someModel.x" required="required" ng-minlength="3">
</td>
<td>
<input type="text" ng-model="someModel.y" required="required" ng-minlength="3">
</td>
<td>
<button ng-click="save(someModel)">Save</button>
</td>
</tr>
In controller i want to have something like this
function ($rootScope, $scope, serive) {
$scope.save = function (someModel) {
if (someModel.$valid) {}
};
}
If you use a form and it has a name, it automatically can give you exactly what you required.
<form name="someForm">
<tr ng-controller="SomeCtrl">
<td>
<input type="text" ng-model="someModel.name" data-ng-required="true" ng-minlength="3">
</td>
<td>
<input type="text" ng-model="someModel.x" data-ng-required="true" ng-minlength="3">
</td>
<td>
<input type="text" ng-model="someModel.y" data-ng-required="true" ng-minlength="3">
</td>
<td>
<button data-ng-disabled="!someForm.$valid" ng-click="someForm.$valid && Namesave(someModel)">Save</button>
</td>
</tr>
</form>
Otherwise, there is no automagical way to do that. I guess you can write a directive which gives you all your inputs and their validators, parse them, and have a validation on the whole model, but no such thing readily exists, I believe.
Better way to do it:
ng-form name="myForm" can be used to avoid using tag and it should work - plunker.
but using ng-include will make the form unavailable to controller - plunker , explanation. A work around for this issue is to pass the form as parameter to the controller method - plunker
I've got a dynamic form that can have n amount of rows, so the field names are an array. However I'm running into the problem that when a textarea is empty the value is not submited
This causes a discrepancy in the length of the array data (all array's should be 5 long, however only 2 notes where filled in causing the data to slip into the wrong row)
How can I post it so the resulting array for Note is ['','','','Mr Fields','No 543']?
Here's an example of three of the rows
<tr>
<td><input type="hidden" name="RateId[]" value="23"><input
type="text" name="Date[]" value="2013.08.23"
class="datepicker required hasDatepicker" id="dp1378446864655"></td>
<td>Meeting Room A
<textarea placeholder="Note" name="Note[]"
style="height: 26px;"></textarea></td>
<td class="calc"><input type="number" min="1" name="Count[]"
style="width: 3em" value="1"> x <input type="hidden"
name="Nights[]" value="1">
<div class="pull-right">
IDR <input type="number" min="1" name="Value[]" value="3000000">
</div></td>
</tr>
<tr>
<td><input type="hidden" name="RateId[]" value="22"><input
type="text" name="Date[]" value="2013.08.23"
class="datepicker required hasDatepicker valid" id="dp1378446864653"></td>
<td>Airport drop off
<textarea placeholder="Note" name="Note[]"
style="height: 26px;">Mr Fields</textarea></td>
<td class="calc"><input type="number" min="1" name="Count[]"
style="width: 3em" value="1"> x <input type="hidden"
name="Nights[]" value="1">
<div class="pull-right">
IDR <input type="number" min="1" name="Value[]" value="250000">
</div></td>
</tr>
<tr>
<td><input type="hidden" name="RateId[]" value="26"><input
type="text" name="Date[]" value="2013.08.23"
class="datepicker required hasDatepicker" id="dp1378446864654"></td>
<td>Restaurant Bill
<textarea placeholder="Note" name="Note[]"
style="height: 26px;">No 543</textarea></td>
<td class="calc"><input type="hidden" name="Count[]" value="1"><input
type="hidden" name="Nights[]" value="1">
<div class="pull-right">
IDR <input type="number" min="1" name="Value[]" value="100">
</div></td>
</tr>