Im trying to create an ng-table which needs following
each cell should be editable on single click.
Each cell will have a template ( like few cells are text fields and few cells have options dropdown in it ).
3.This grid should always have one empty/new row for user to enter values , as user clicks on empty/new row ( which is always shown by default ) a new row should get added.
More precise, do I have to add a template like this ?
<td data-title="'Agency #'"><input type="text" ng-model="dealer.AgencyKey" /></td>
also for options do I have to add like this
<td data-title="'Account Type 2'"> <select class="form-control" ng-model="contractsHeader.AccountTypePT" required autofocus id="accountType2Options">
<option ng-repeat="accountType2 in accountTypes2" value="{{accountType2.KeyValue}}">{{accountType2.Description}}</option> </select> </td>
NOTE : I have basic knowledge on ng-table ( creating read only table by binding data from service )
Appreciate your thoughts and inputs
You need to move your ng-repeat from the option to the select
Related
I have an AngularJS project that uses Angular Bootstrap and I use the Angular-xeditable library for some edit-in-place fields in a table.
One of the inputs I have is a "select" input, i.e. a drop-down list that allows a user to select one option. (editable-select in xeditable).
I am trying to make this input mandatory when saving the form, but I cannot find a way to do this. Similar to all the x-editable controls I would expect that I can simply add an e- prefix to the standard angular directive to apply that directive to the xeditable control, that is, I should be able to add e-ng-required="true" to my control to make it mandatory. Yet this does not work. I do not get any errors when I add this, but it doesn't "do" anything. I can still save my form without selecting an item.
The following is a code sample of what I'm trying to do:
<form editable-form name="tableform" onaftersave="saveSubmissions()" oncancel="cancel()">
<table>
<!--Define table headings and columns...-->
<!--Define an ng-repeat to display each row-->
<tr ng-repeat="currentRow in dataRows">
<!--Add some columns for the row-->
<!--Add the select/drop-down column pertaining to this question-->
<td>
<span editable-select="currentRow.vendorID" e-ng-options="x.vendorId as x.name for x in vendors" e-form="tableform" e-ng-required="true">
{{showVendor(currentRow)}}
</span>
</td>
<!--Add some more columns for each row-->
</tr>
</table>
</form>
Even though I've set e-ng-required="true" on the element, it does nothing. How can I make the selection of an item mandatory using xeditable? I have searched for examples but couldn't find anything helpful.
Unfortunately required doesn't work with form validators as stated in the following links
Required field validation is not working
Validation field form using tag "form" with angular-xeditable
You have to manually check and set the validity of input onbeforesave and set validity of input element.
html
<span editable-select="currentRow.vendorID" e-ng-options="x.vendorId as x.name for x in vendors" e-form="tableform" e-name="vendor" onbeforesave="checkValidity()">
{{showVendor(currentRow)}}
</span>
js
$scope.checkValidity = function(){
if(valid){
$scope.tableform.$setValidity("vendor", true);
}
else{
$scope.tableform.$setValidity("vendor", false);
}
}
I'm hoping angularjs ng-options can allow a user to enter a new value / option or edit an existing one in-situ
Is this possible? or is there a way to do so?
My code:
<div class="col-md-2">
<select class="form-control"
ng-model="BatchNos.Selected"
ng-options="item.BatchNo for item in BatchNos track by item.BatchId"
style="background-color:dimgray;font-weight:Bold;color:white">
</select>
</div>
yes you can add an option textbox inside it and input type submit and finally when clicked on submit, you can add the item to the BatchNos
I have nested data objects that I want to show to a user based on the filters they have selected. I am a bit new to angular but finding how to solve this problem has taken me a while now and not really got anything good.
<tr ng-repeat="stockItem in stock | filter : stockFilter ">
<td>{{stockItem.dateCreated | date:'dd/MM/yyyy (HH:mm)'}}</td>
<td>{{stockItem.sku}}</td>
<td>
<select class="form-control">
<option ng-repeat="supplierOrderStock in stockItem.supplierStock | filter : supplierSelectionFilter"
value="{{supplierOrderStock.supplierId}}" >
£{{supplierOrderStock.price}}
</option>
</select>
</td>
</tr>
I have check boxes on the top of the page and when you check or uncheck them the drop downs get updated with the filtered data.
Problem is that the SELECTED drop down is random, usually the first one that was selected on initial render.
I just want the cheapest value to be shown in the drop downs and the way the data is sorted that is always going to be the first select option.
How do I set the drop down selected value, for each nested repeat to be either the cheapest one or just simply the always the first drop down??
You can try to use the NgOption directive instead:
<div class="col col-50">
<span>Orientation</span> <br>
<select name="orientation" id="orientation" ng-options="option.label for option in data.filters.basics.orientations track by option.id" ng-model="data.selectedOrientation">
</select>
</div>
In my case the data.selectedOrientation is the default ng-model that i had to setup in the controller:
$scope.data.selectedOrientation = $scope.data.filters.basics.orientations[($scope.data.selections.basics.orientations[0]-1)]
If you dont want to change your dom element jsut add a ng-model to it
<tr ng-repeat="stockItem in stock | filter : stockFilter ">
<td>{{stockItem.dateCreated | date:'dd/MM/yyyy (HH:mm)'}}</td>
<td>{{stockItem.sku}}</td>
<td>
<select class="form-control">
<option ng-repeat="supplierOrderStock in stockItem.supplierStock | filter : supplierSelectionFilter" ng-modal="yourModelForThisDom"
value="{{supplierOrderStock.supplierId}}" >
£{{supplierOrderStock.price}}
</option>
</select>
</td>
</tr>
After learning a bit more I finally realised that it will be much easier if all the data is stored and filtered on the Model and collections within.
<select class="form-control" ng-show="stockItem.supplierStockFiltered.length > 0"
ng-model="stockItem.selectedSupplier"
ng-options="option as getSupplierDropDownText(option) for option in stockItem.supplierStockFiltered track by option.price"></select>
<span ng-show="stockItem.supplierStockFiltered.length == 0 || stockPackItem.supplierStockFiltered == null ">
No Stock
</span>
So when the data loads or when ever I click on any check boxes, I just use angular.forEach( in the controller to set the Selected Item based on what ever I filtered out. The actual two fields I am binding too are not contained int he the data that comes back from the server. But in JS you can just dynamically add those fields before the HTML binds and it works great!
The HTML is much cleaner and I have much better control over the models.
End of the day I had to go do this any way because now I need to save all the selected drop down values... and now because the Selected item is bound to the model.. its easy peasy. I just serialise the models and use the data on the server.
I have created a dropdown using angularjs directive. Following is the template I have used
<select ng-model="selected" ui-select2="{allowClear: true, placeholder: placeholder}">' +
'<option value=""></option>' +
'<optgroup ng-repeat="group in Groups" label="{{group.name}}">' +
'<option ng-repeat="value in values" value="{{value.code}}" >{{value.name}}</option>' +
'</optgroup>' +
'</select>
Now, I have a table which has same dropdown values in one of the columns. When a table row is clicked I need to get the value and select the respective value in the dropdown automatically. I was able to fetch values from the row but not sure how to select the clicked option in the dropdown.
I have searched around for suggestions but got nothing so far. Please suggest. I have started learning angularjs last week only so pardon me if I am missing something obvious here.
The general solution what you are trying to accomplish is to simply change the model of the select element and select boxes' value will update automatically.
Assuming that your table row is set up like so:
<table><tbody>
<tr ng-repeat="number in [1,2,3,4]">
<td><button ng-click="selected = number">{{number}}</button></td>
</tr>
</tbody></table>
<select ng-model="selected">
<option ng-repeat="value in [1,2,3,4]" value="{{value}}">{{value}}</option>
</select>
clicking on the button in the table will set the value of the select dropdown accordingly
I ma very beginner in Angularjs and pardon my silly mistakes. I have a table which shows data in three columns and i want to filter this table based on a condition and hide unnecessary data in one column which contains integers. I have used ng-show with some condition linked to ng-model and this is working perfect if i enter data in my ng-model only after loading total form. But, i want to show all the table data in the beginning and then hide unnecessary data based on ng-show condition.
How can i do this? I am struggling!
<tr ng-show= "change > val1 " ng-repeat="change in montlyProjection();" >
<td>some data</td>
<td class="number">some data</td>
<td class="number" ng-class="positiveNegative(convertToNumber(startBalance) + change)">some data</td>
</tr>
</strong><input type="text" ng-model="val1" placeholder="Enter Amount" />
<tr ng-show="((change > val1) || !val1)" ng-repeat="change in monthlyProjection()">
Try adding additional conditions to the ng-show directive. If !val doesn't work try using "angular.equals(val1,'')" or "angular.isDefined(val1)"