Question

我有这个fiddle（这不起作用，我不知道为什么。如果有人帮忙解决它会很高兴）。小提琴中的代码是：

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}];
});

问题是范围（年龄）输入没有绑定到它上面的跨度（“孩子年龄为{{kid.age}}”）。

为什么没有绑定？

Answer 1

你的小提琴配置不正确。您应该在AngularJs版本下面选择“No wrap in”。

Here是更新的小提琴。

除了更改设置外，您还需要将ng-model添加到范围输入中，例如@nubinub建议。

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

Answer 2

将onLoad更改为No Wrap

中的JSFiddle

还在输入字段中使用ng-model与angularjs

绑定

更改

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

到

看看这个

<强> 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>

角度绑定不起作用

2 个答案: