How to get textbox value from json in Angularjs

Question

I'm new to angularjs, I have two text boxes and a button. First textbox is to fill with age(15 to 66 - numbers only). Second textbox is to fill with term in "nine" / "twelve" / "fifteen" in string only. (else radio buttons is also ok in place of second textbox but i have no idea how to implement this with my problem.). after entering two fields click on button i have to get:

term data with entered age and with "nine" / "twelve" / "fifteen" json data only.

"Age: 44 and Term: 785.5"

ex: In first textbox I have entered "44" as age, and in second textbox I have entered "twelve" (or else I have selected "12" in radio button), and click on button i have to get the value as "Age: 44 and Term: 785.5"

WORKING FIDDLE

I have no idea how to dynamically change "ng-bind='pa.term.twelve'" this value(twelve value):

<ul>
   <li ng-repeat="pa in T816 | filter:getAge">
      <p>
         Term 12 Data: <b data-ng-bind="pa.term.twelve"></b>
      </p>
   </li>
</ul>

any help is appreciated.

I looked into the fiddle,it seems to work fine. "pa.term.twelve" is the data from T816 array,how you exactly want to dynamically change.i dont get it. — Ritt
– Ritt, Commented Apr 29, 2015 at 9:04
actually i need to enter twelve or fifteen or nine into text box and in html part twelve should not be there.. data-ng-bind="pa.term" — UiUx
– UiUx, Commented Apr 29, 2015 at 9:06
so in the html part where you have hard-coded 12,there you want what you type in text box,correct me if i am wrong — Ritt
– Ritt, Commented Apr 29, 2015 at 9:08

Daniele · Accepted Answer · 2015-04-29 09:06:12Z

1

Not the best way to do it, but you can try with this kind of expressions:

<p ng-if="getTerm === 'nine'">Term 9 Data: <b data-ng-bind="pa.term.nine" ></b></p>
<p ng-if="getTerm === 'twelve'">Term 12 Data: <b data-ng-bind="pa.term.twelve"></b></p>
<p ng-if="getTerm === 'fifteen'">Term 15 Data: <b data-ng-bind="pa.term.fifteen"></b></p>

using ng-if will render only the p with the getTerm selected.

I updated your fiddle reflecting the given solution.

answered Apr 29, 2015 at 9:06

Daniele

1,93616 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

UiUx Over a year ago

thats that works as expected and how to change in such cases: fiddle

Daniele Over a year ago

You are holding the radio button value inside ng-model="value", so just change getTerm with value or wathever you define as the model fiddle

Pavel Kutakov · Accepted Answer · 2015-04-29 09:11:30Z

You can place 3 block of data with ng-if condition, like the following:

<p>Term 12 Data: <b ng-if="getTerm=='nine'" data-ng-bind="pa.term.nine"></b>
                 <b ng-if="getTerm=='twelve'" data-ng-bind="pa.term.twelve"></b>
                 <b ng-if="getTerm=='fifteen'" data-ng-bind="pa.term.fifteen"></b>
</p>

Or you may create function that will return correct value. In your example you need just to display correct value and you have no need to update it, so function is ok:

<p>Term 12 Data: <b>{{getTermValue(pa.term)}}</b></p>

and function:

$scope.getTermValue=function (term){
            switch ($scope.getTerm)
            {
                    case "nine": return term.nine;
                    case "twelve": return term.twelve;
                    case "fifteen": return term.fifteen;
            }
            return "";
        }

Function is better if number of properties may increase.

Collectives™ on Stack Overflow

How to get textbox value from json in Angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related