CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
UiUx
UiUx

Reputation: 995

How to get textbox value from json in Angularjs

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.

Upvotes: 1

Views: 1078

Answers (2)

Pavel Kutakov
Pavel Kutakov

Reputation: 971

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.

Upvotes: 1

Daniele
Daniele

Reputation: 1938

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.

Upvotes: 1

Related Questions