CODEWITHSUNDEEP
javascripthtmlangularjsdata-binding
vlio20
vlio20

Reputation: 9295

Angular binding not working

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?

Upvotes: 0

Views: 153

Answers (2)

Nidhish Krishnan
Nidhish Krishnan

Reputation: 20741

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>

Upvotes: 1

callmekatootie
callmekatootie

Reputation: 11228

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}}">

Upvotes: 2

Related Questions