How to get dynamically added textbox value in button click using angularjs

Question

0.00/5 (No votes)

See more:

i have a textbox and a button inside a div and that div is created dynamically

What I have tried:

.js file
--------------------------------

html file
---------------------------------------------

Posted 13-May-16 1:26am

Member 12480925

Updated 15-May-16 19:34pm

v4

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2016-05-13T02:48:00

Solution 1

try this

JavaScript

$scope.addcrt = function (quantity) {
               // alert (quantity);
               $scope.arr.push({ "item": $scope.itid, "prc": $scope.amt, "qtt": quantity });

           }

HTML

<input type='text' id='txtqty' ng-model="qt" />
                <input type='button' ng-click="addcrt(qt)" class='btnadd' value='Add' />

Posted 13-May-16 2:48am

Karthik_Mahalingam

Updated 13-May-16 2:49am

Comments

Karthik_Mahalingam 13-May-16 11:07am

try this

<input type='button' ng-click="addcrt(qt,it)" class='btnadd' value='Add' />

$scope.addcrt = function (quantity,it) {
// alert (quantity);
alert(it.price1)
alert(it.item_id)

let me know if it works

Karthik_Mahalingam 13-May-16 11:13am

post your full code, i thing you are missing some

Karthik_Mahalingam 13-May-16 11:35am

try my code, and modify it as per your need.

Karthik_Mahalingam 13-May-16 11:33am

try this in a new html page.

<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="angular.js"></script>

<script>
var app = angular.module('myapp', []);
app.controller('myctrl', myctrl);

function myctrl($scope, $http, $timeout, $interval) {

$scope.z = [{ item_img: '', item_id: 1, item_name: 'apple', price1: 50, },
{ item_img: '', item_id: 2, item_name: 'orange', price1: 35, },
{ item_img: '', item_id: 3, item_name: 'lemo', price1: 10, }];

$scope.arr = [];

$scope.addcrt = function (quantity,it) {
$scope.arr.push({ "itemid": it.item_id, "itemname": it.item_name, "prc": it.price1, "qtt": quantity });
}
}

</script>

</head>
<body>

<div ng-app="myapp" ng-controller="myctrl as model">
<div ng-repeat="it in z">
<div>
<span ng-bind="it.item_name"></span>
<span ng-bind="it.price1"></span>
<input type='text' id='txtqty' ng-model="qt" />
<input type='button' ng-click="addcrt(qt,it)" class='btnadd' value='Add' />
</div>
</div>
<ul>
<li ng-repeat="it in arr">
Id: <span ng-bind="it.itemid"></span> <br />
Name: <span ng-bind="it.itemname"></span> <br />
Price:<span ng-bind="it.prc"></span><br />
Quantity:<span ng-bind="it.qtt"></span><br />
</li>
</ul>

</div>

</body>
</html>

Karthik_Mahalingam 13-May-16 11:58am

So . what validation you need ?

[no name] 13-May-16 12:02pm

it'll check if textbox is blank it'll not insert into otherwise proceed further...

Karthik_Mahalingam 13-May-16 12:16pm

$scope.addcrt = function (quantity, it) {

if (quantity == null || quantity=='' || quantity.trim() =='') {
alert('Please enter the quantity!');
return;
}
$scope.arr.push({ "itemid": it.item_id, "itemname": it.item_name, "prc": it.price1, "qtt": quantity });
}

Karthik_Mahalingam 13-May-16 12:37pm

welcome, its ok no problem,

are you using jquery?
if so, it will make your job more esay.

[no name] 13-May-16 12:39pm

yes i know jquery.is it same for angular also

Karthik_Mahalingam 13-May-16 12:43pm

what you can do is,

declare the div with display none style
<div id="div1" style="display:none"></div>

and in the event you can hide it
$('#div1').hide()

so simple..

Karthik_Mahalingam 13-May-16 12:50pm

bro, post a new question, with more details clearly what you want to achieve..
this conversation is growing and moving out of topic.
i can help you.

[no name] 13-May-16 12:51pm

ok

Karthik_Mahalingam 13-May-16 13:09pm

inside the click method write this
$('#div1').hide()

Karthik_Mahalingam 13-May-16 14:21pm

welcome