Hello all,
I am just making a simple demo electron app and I decided to make it using Ionic Framework, now I have fetched the data from Mysql DB and used to ng-repeat to create a List but the problem is I need to add a textbox to each item and set a unique ng-model for each textbox but unfortunately the textbox is getting populated with the value which I am setting as ng-model 
kindly help me to fix this issue.
<ion-modal-view> <ion-header-bar class="bar-royal"> <h1 class="title">Add Bill</h1> <button class="button button-assertive" ng-click="closeModal();"><i class="icon ion-close-round">Close</i></button> </ion-header-bar> <ion-content ng-controller="addBillCtrl"> <ion-list> <label class="item item-input"> <span class="input-label">To</span> <select ng-model="bill.customer"> <option ng-repeat='customer in customersArray' value="{{customer.id}}">{{customer.shop_name}}</option> </select> </label> <label class="item item-input" ng-repeat='product in productsArray'> <span class="input-label">{{product.pcount}}{{product.pname}}</span> <span class="input-label">{{product.pprice}}</span> <input type="text" ng-model="product.pid" /> </label> </ion-list> <span>{{product.pid}}</span> </ion-content> </ion-modal-view>
i do not know, if you know what ngModel is for…
it connects a scope variable with the input field. if the model contains a value --> it is set in the input. if you change the text in the input --> it will be update the scope variable…
Two-Way-Data-Binding…
if you want to store the text on an extra key
<input type="text" ng-model="product.yourInput" />
Thanks for the response @bengtler actually I just used that value="" attribute to test even if I remove that I am getting the output as attaached in the screenshot
Basically I just wanted to make billing tool so when the user enters the number of quantity in a corresponding textbox i will calculate the total price
yeah then use my example --> store the amount on a new key on your product —> because you will need them later (for recalculation or order summary. And you do not need to set the value="". and if you are using this in angularjs context you can use ng-value="" to get the data-binding working.
use
<input type="text" ng-model="product.quantity" />
so you can access the previously added quantity later 
@bengtler how can I dynamically create a preview of the Entered details
I mean I need to show the Products and other details in a Grid View(Dynamically Generated) and from there I would like to print it(Only the preview div).I tried using “ng-bind-html” but its simply appending the html tags they are not getting compiled,Please guide me to make the print preview and print only that div.
show us your code in the template and controller.
and use https://docs.angularjs.org/api/ng/service/$sce trustAsHtml
<script id="add-bill.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar-royal">
<h1 class="title">Add Bill</h1>
<button class="button button-assertive" ng-click="closeModal();"><i class="icon ion-close-round">Close</i></button>
</ion-header-bar>
<ion-content ng-controller="addBillCtrl">
<ion-list>
<label class="item item-input">
<span class="input-label">To</span>
<select ng-model="bill.customer">
<option ng-repeat='customer in customersArray' value="{{customer.id}}">{{customer.shop_name}}</option>
</select>
</label>
<label class="item item-input" ng-repeat='product in productsArray'>
<span class="input-label">{{product.pcount}}{{product.pname}}</span>
<span class="input-label">{{product.pprice}}</span>
<input type="text" ng-model="product.pquantity" ng-value="0" />
<span class="input-label">{{product.pprice*product.pquantity ||0}}</span>
</label>
<label class="item item-input" style="float:right;">Total:{{sumUp()}}</label>
</ion-list>
<div ng-bind-html="previewBillBlock"></div>
</ion-content>
</ion-modal-view>
</script>
`.controller(‘addBillCtrl’, function($scope, billService) {
$scope.sumUp = function() {
var sum = 0;
angular.forEach($scope.productsArray, function(value, key) {
sum = sum + (parseInt(value.pprice) * parseInt(value.pquantity) || 0);
});
//console.log(sum);
return isNaN(sum) ? 0 : sum;
};
$scope.printBill = function() {
/var popupWin = window.open(’’, ‘_blank’, ‘width=600,height=600,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no’);
popupWin.document.write(’’ + ‘’ + ‘
//window.print();
billService.printIt();
};
$scope.previewBill = function() {
//$scope.openModal(‘previewModal’);
$scope.previewBillBlock = '
< div class = “col-25” > < img src = "./img/logo.png"
height = "50px"
width = “50px” / >
< /div> < div class = “col-75 padding logo” >
INDIRA THREAD BALLS < /div >
< /div> < div class = “row billHeader” >
< div class = “col” >
< center > Contact: < strong > 7708898448 < /strong>
< /div> < /div > < div class = “row” >
< div class = “col-65” > To: < strong > < /strong>
< div class = “col-35” > Date: < /div> < /div > ';
console.log($scope.bill.customer.shop_name);
};
})`
Sorry for a long reply
where do you call this function to fill previewBillBlock?
and you must run $scope.previewBillBlock = $sce.trustAsHtml($scope.previewBillBlock);
to be allowed to bind this in your template
Thank you so much @bengtler now I could get the content displayed is it possible to print this div block(Using node-thermal-printer)all I need is to select only this block and print as it is?
how would you print this on a mobile device???
if you run this locally and you know your exactly usb-port and your printer drivers are installed then it would work. ^^
This is an Electron app which I am going to install it on a PC
how can I select the div in which I have showed the preview?
do not know what the printer module supports, but i would convert the html string to a pdf:
https://www.npmjs.com/package/html-to-pdf
and then print the pdf file.
The printer module supported direct string not sure if that supports pdf
I am using this one https://www.npmjs.com/package/node-thermal-printer
yeah but thats your business. ^^
i would generate a format the module can handle.
this module seems a little bit better to me:
https://www.npmjs.com/package/thermalprinter
Do not print the html source --> create a node function which is exported to your app --> pass all necessary data to that function. it will use the module an prints the document.
I am developing electron app with ionic framework. I want to print the table when i click on print button.
@bengtler @Dineshraja help me.