Set value of unknown number of inputs in AngularJS

Question

I have a webapp dedicated to TV Shows. A controller fetches the registered TV Shows:

$http.get('/shows').success(function(data) {

    $scope.shows = data; 

    var temp = data[0];

    $scope.radio-input-shows = temp['name'];

});

This is passed to an AngularJS view, which displays them with a radio button.

<div class="col-use-list sidebar">

    <div class="col-md-12 sidebar-element sidebar-triangle" ng-repeat="show in shows" style="margin-bottom: 10px;">

        <div class="col-use-icon" style="padding-left: 0px;">

            <img alt="{{ show.name }}" src="img/artwork/{{ show.image_name }}.png" style="width:60px;height:60px;">

        </div>

        <div class="col-use-name">

            <p>{{ show.name }}</p>

        </div>

        <div class="col-use-select">

            <input type="radio" name="sidebar-radio" ng-model="radio-input-shows" value="{{ show.image_name }}">

        </div>

    </div>

    <tt>Show = {{radio-input-shows | json}}</tt><br/>

</div>

What I need now is to pass the name of a show as a value to the radio input. Is this even possible?

=================

So I now changed the input to this <input type="radio" name="checkbox" ng-model="tvshow" ng-value="show.name">. And changed this <tt>Show = {{tvshow}}</tt><br/>. However, it's still not updating if I click on another radio button... `

you are using primitives for variables assigned to ng-model. Since ng-repeat creates child scopes you will have inheritance problems. Always have a dot in ng-model which means passing object properties not primitives — charlietfl
– charlietfl, Commented Sep 19, 2014 at 18:05

m59 · Accepted Answer · 2014-09-19 18:21:25Z

1

Of course! You simply use ng-value to set the value according to an Angular expression, and use a $scope property.

<input type="radio" ng-model="whatever" ng-value="show.name">

Live Demo

You're also using invalid property names. radio-input-shows is not valid JavaScript and is throwing an error. That should camelCased radioInputShows or at least something that isn't a syntax error.

Lastly, you should always follow the "dot" rule so that child scope changes affect parent scopes.

<input type="radio" ng-model="foo.radioInputShows" ng-value="show.image_name">
<tt>Show = {{foo.radioInputShows | json}}</tt><br/>

In the controller:

$scope.foo = {
  // default value
  radioInputShows: '123'
};

This is just taking advantage of object references to share changes.

edited Sep 19, 2014 at 18:21

answered Sep 19, 2014 at 17:02

m59

43.9k14 gold badges122 silver badges139 bronze badges

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

4 Comments

User183849481 Over a year ago

I did that, but I if I click a radio-button <tt>Show = {{radio-input-shows | json}}</tt><br/> doesn't update...

m59 Over a year ago

@User183849481 Works fine when you don't have syntax errors: jsbin.com/xazodu/2/edit Be sure to look at the console while developing. It should have been showing you that the variable name was not acceptable.

User183849481 Over a year ago

I updated the question, since it's still not updating :S

m59 Over a year ago

@User183849481 Ah, I didn't catch it at first due to the two other problems. See my updated answer. Just another note: inline style is almost never a good idea. There are occasionally good uses of ngStyle to conditionally bind in something, but that's about it.

Collectives™ on Stack Overflow

Set value of unknown number of inputs in AngularJS

1 Answer 1

Live Demo

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related