Angular binding not working

Question

I have this fiddle (which won't work, I don't know why. Will be glad if someone would help to fix it). The code in the fiddle is:

HTML:

<body ng-app="testApp">
    <div ng-controller="AppCtrl">
        <span>kid name is {{kids[0].name}}</span><br />
        <input type="text" ng-model="kids[0].name" value={{kids[0].name}} > <br />
        <span>kid age is  {{kids[0].age}}</span> <br />
        <input type="range" value={{kids[0].age}} >

        <div ng-repeat="kid in kids">
            <br />
            The kid's name is <strong id="name">{{kid.name}}</strong> and his age is {{kid.age}}
            <br />
            <input type="range" value={{kid.age}} >
        </div>
    </div>
</body>

JS:

var testApp = angular.module('testApp', []);

testApp.controller('AppCtrl', function ($scope, $http)
{
    $scope.kids = [{"name": "Din", "age": 11}, {"name": "Dina", "age": 17}];
});

The problem is that the range (age) input is not binded to the the span above it ("kid age is {{kid.age}}").

Why there is no binding?

The correct answer, the one from nubinub, was actually downvoted and deleted! The fact is that Angular does its binding with ng-model NOT with value. Plus the fact that the fiddle was not even working (it needed the "No wrap" option, as pointed out by others). — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented May 9, 2014 at 7:33

callmekatootie · Accepted Answer · 2014-05-09 07:31:14Z

2

Your fiddle was configured incorrectly. You should select "No wrap in " below the AngularJs version.

Here is the updated fiddle.

In addition to the change in setting, you also need to add ng-model to the range input like @nubinub suggested.

<input type="range" ng-model="kid.age" value="{{kid.age}}">

answered May 9, 2014 at 7:31

callmekatootie

11.2k16 gold badges73 silver badges109 bronze badges

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

2 Comments

vlio20 Over a year ago

why should I add it? for the text input it is working without it.

Nikos Paraskevopoulos Over a year ago

The value is redundant, only ng-model is needed.

Nidhish Krishnan · Accepted Answer · 2014-05-09 12:00:51Z

1

Change the onLoad to No Wrap in JSFiddle

Also use ng-model in input field for binding with the angularjs

change

 <input type="range" value={{kid.age}} >

to

Take a look at this

Working Demo

<body ng-app="testApp">
<div ng-controller="AppCtrl">
    <span>kid name is {{kids[0].name}}</span><br />
    <input type="text" ng-model="kids[0].name" value={{kids[0].name}} > <br />
    <span>kid age is  {{kids[0].age}}</span> <br />
    <input type="text" value={{kids[0].age}} >

    <div ng-repeat="kid in kids">
        <br />
        The kid's name is <strong id="name">{{kid.name}}</strong> and his age is {{kid.age}}
        <br />
        <input type="range" ng-model="kid.age" value="{{kid.age}}">
    </div>
</div>

edited May 9, 2014 at 12:00

answered May 9, 2014 at 7:29

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

3 Comments

vlio20 Over a year ago

Hi, the fiddle you posted not working (there is still no binding).

Nidhish Krishnan Over a year ago

also use ng-model in input field for binding with the angularjs

fer Over a year ago

Not really relevant, but this fiddle uses Angular 1.0.2 instead of 1.2.1... don't get why sanitize and resource should be added

Collectives™ on Stack Overflow

Angular binding not working

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related