Binding object values from radio input with ng-model

Question

I have a json file

$scope.favoriteThings = [
    {nr: 1, text: "Raindrops on roses"},
    {nr: 2, text: "Whiskers on kittens"},
    {nr: 3, text: "Bright copper kettles"},
    {nr: 4, text: "Warm woolen mittens"},
    {nr: 5, text: "Brown paper packages tied up with strings"},
    {nr: 6, text: "Cream colored ponies"},
    {nr: 7, text: "Crisp apple streudels"},
    {nr: 8, text: "Doorbells"},
    {nr: 9, text: "Sleigh bells"},
    {nr: 10, text: "Schnitzel with noodles"},
    {nr: 11, text: "Wild geese that fly with the moon on their wings"},
    {nr: 12, text: "Girls in white dresses with blue satin sashes"},
    {nr: 13, text: "Snowflakes that stay on my nose and eyelashes"},
    {nr: 14, text: "Silver white winters that melt into springs"}
  ];

-I am using ng-repeat directive to repeat the above array.

<li ng-repeat="thing in favoriteThings">
        <input type="radio" value="{{thing}}" ng-model="$parent.selected" name="stuff"/>
          {{thing.text}}
      </li>

- I am displaying the value obtained by selecting a checkbox as Selected thing: {{selected}}{{selected.nr}}

then i get the following output

Selected thing: {"nr":5,"text":"Brown paper packages tied up with strings"} To acces the "nr" attribute i try to use {{selected.nr}} but that does not work Any ideas why? PLUNKER LINK EDIT: I also want to access the TEXT attribute

Anas Aboureada · Accepted Answer · 2015-11-13 10:32:50Z

1

Just edit your html body to be like that

      <body ng-controller="MainCtrl">
        <ul>
          <li ng-repeat="thing in favoriteThings">
            <input type="radio" value="{{thing.nr}}" ng-model="$parent.selected" name="stuff"/>
              {{thing.text}}
          </li>
        </ul>
        <hr/>
        Selected thing: {{selected}}  {{getText(selected)}}
      </body>

And add this function to your controllers

      $scope.getText  = function(_nr){
          var found = $filter('filter')($scope.favoriteThings, {nr: _nr}, true);
          return found[0].text
        }

you can see it working here Plunker

edited Nov 13, 2015 at 10:32

answered Nov 13, 2015 at 10:06

Anas Aboureada

962 silver badges6 bronze badges

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

1 Comment

gandharv garg Over a year ago

Sorry my question was not clear.. i want to acces the text attribute also

georgeawg · Accepted Answer · 2016-09-01 00:34:59Z

Replace the value attribute with the ng-value directive:

 <body ng-controller="MainCtrl">
    <ul>
     <li ng-repeat="thing in favoriteThings">
        <!-- REPLACE interpolated value
        <input type="radio" value="{{thing}}" ng-model="$parent.selected" name="stuff"/>
        -- with the ng-value directive -->
        <input type="radio" ng-value="thing" ng-model="$parent.selected" name="stuff"/>
          {{thing.text}}
      </li>
    </ul>
    <hr/>
    Selected thing: {{selected}}<br>
    Number: {{selected.nr}}<br>
    Text:   {{selected.text}}
  </body>

By using interpolation, value={{thing}}, the thing object was getting converted to a string. The ng-value directive preserves the thing object as an object.

The DEMO on PLNKR

Collectives™ on Stack Overflow

Binding object values from radio input with ng-model

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related