How to create a list with dynamic items with textbox?


#1

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 :frowning: 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>


#2

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" />


#3

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


#4

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 :wink:


#5

Thanks for the help @bengtler as you have said I have changed that and now its working well :smile:


#6

@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.


#7

show us your code in the template and controller.
and use https://docs.angularjs.org/api/ng/service/$sce trustAsHtml


#8
<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(’’ + ‘’ + ‘

Hello Dinesh
’);/
//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


#9

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


#10

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?


#11

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. ^^


#12

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?


#13

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.


#14

The printer module supported direct string not sure if that supports pdf :frowning:
I am using this one https://www.npmjs.com/package/node-thermal-printer


#15

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.


#16

Thanks for the guidance @bengtler will check them. :smile:


#17

I am developing electron app with ionic framework. I want to print the table when i click on print button.

@bengtler @Dineshraja help me.