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
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>
I'm trying to update checkbox value, when I try to check or uncheck the checkbox it doesn't update the ng-model value it persis
<tr height="44" ng-repeat="res in resources">
<td>{{res.project}}</td>
<td>{{res.resource}}</td>
<td><input type="text" placeholder="Resource Weightage" ng-model="res.alloc" ></td>
<td>
<input ng-checked="res.add==1 || isAllSelected" type="checkbox" checklist-value="res.add" checklist-model="res.add">
</td>
<td>
<input ng-checked="res.edit==1 || isAllSelected" type="checkbox" checklist-value="res.edit" checklist-model="res.edit">
</td>
<td>
<input ng-checked="res.delete==1 || isAllSelected" type="checkbox" checklist-value="res.delete" checklist-model="res.delete" >
</td>
<td>
<input ng-checked="res.view==1 || isAllSelected" type="checkbox" checklist-value="res.view" checklist-model="res.view">
</td>
</tr>
Screen Shot of Request is here
According to docs of checklist directive
It's necessary to set to checklist-model array that will contain values, but in the checklist-value it's necessary to put the value that will be pushed to the array.
in other words it should be like that
<input type="checkbox" checklist-value="'some value'" checklist-model="someTargetArray">
I suppose you should use simple checkbox with ng-model like
<input type="checkbox" ng-model="res.view">
I am assuming using this plugin. so according to the example in the link you need to pass value of your input bot in checklist-value and you don't need ng-checked.
Here i am assuming you want an res to contain an array like ['add','edit','delete','view'] when checkboxes are selected.
<tr height="44" ng-repeat="res in resources">
<td>{{res.project}}</td>
<td>{{res.resource}}</td>
<td>
<input type="text" placeholder="Resource Weightage" ng-model="res.alloc"></td>
<td>
<input type="checkbox" checklist-value="'add'" checklist-model="res">
</td>
<td>
<input type="checkbox" checklist-value="'edit'" checklist-model="res">
</td>
<td>
<input type="checkbox" checklist-value="'delete'" checklist-model="res" >
</td>
<td>
<input type="checkbox" checklist-value="'view'" checklist-model="res">
</td></tr>
hey guys thanks for your support but unfortunately no solution worked for me rather I've tried another solution that's worked for me
in view
<input ng-true-value='1' ng-false-value="0" ng-checked="res.add==1 || isAllSelected" value="1" ng-change="update($index,res,'a')" type="checkbox" ng-model="res.add">
and in controller
$scope.update = function(index,data,crud) {
if (crud=="a") {
$scope.resources[index].add = data.add;
} else if (crud=="e") {
$scope.resources[index].edit = data.edit;
} else if (crud=="d") {
$scope.resources[index].delete = data.delete;
} else if (crud=="v") {
$scope.resources[index].view = data.view;
}
};
this solved my problem now I can get updated value of check boxes.
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
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
I have a view where I want to iterate a list in the model to render the view, the current code is something like
<form method="Post">
<table class="table">
#Each
<tr>
<td>
<input type="hidden" name="Id[]" value="#Current.Id" />#Current.Id
</td>
<td>
<input type="text" name="Name[]" value="#Current.Name"/>
</td>
<td>
<input type="text" name="Code[]" value="#Current.Code"/>
</td>
<td>
<button type="submit">Submit</button>
</td>
</tr>
#EndEach
</table>
</form>
What I actually wish to do is
<form method="Post">
<table class="table">
#Each
<tr>
<td>
<input type="hidden" name="Id[#CurrentIndex]" value="#Current.Id" />#Current.Id
</td>
<td>
<input type="text" name="Name[#CurrentIndex]" value="#Current.Name"/>
</td>
<td>
<input type="text" name="Code[#CurrentIndex]" value="#Current.Code"/>
</td>
<td>
<button type="submit">Submit</button>
</td>
</tr>
#EndEach
</table>
</form>
where #CurrentIndex will insert the list index.
List index can then be used to bind the property to a list during POST with something like
Post["/"] = _ => {
var list = this.Bind<List<Model>>();
...... do something with list .........
}
SSVE is "dumb", there's no way to execute any arbitrary code. The only way to do this would be to put the index into your model, you can do it with LINQ with something like (not compiled, just typed from memory):
var indexedModel = model.Select((m,i) => new { Index = i, Model = m });
Then in your view do something like:
<form method="Post">
<table class="table">
#Each
<tr>
<td>
<input type="hidden" name="Id[#Current.Index]" value="#Current.Model.Id" />#Current.Id
</td>
<td>
<input type="text" name="Name[#Current.Index]" value="#Current.Model.Name"/>
</td>
<td>
<input type="text" name="Code[#Current.Index]" value="#Current.Model.Code"/>
</td>
<td>
<button type="submit">Submit</button>
</td>
</tr>
#EndEach
</table>
</form>