角度绑定不起作用答案

【问题标题】：Angular binding not working角度绑定不起作用
【发布时间】：2014-06-26 20:23:21
【问题描述】：

我有这个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}}”）。

为什么没有绑定？

【问题讨论】：

正确答案，来自 nubinub 的那个，实际上被否决并删除了！事实上，Angular 与ng-model NOT 与value 绑定。再加上小提琴甚至无法正常工作（正如其他人所指出的那样，它需要“不换行”选项）。
@vlio20 看看我的回答

标签： javascript html angularjs data-binding

【解决方案1】：

将JSFiddle 中的onLoad 更改为No Wrap

还可以在输入字段中使用 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>

【讨论】：

嗨，您发布的小提琴不起作用（仍然没有绑定）。
还在输入字段中使用 ng-model 与 angularjs 进行绑定
不是很相关，但是这个小提琴使用 Angular 1.0.2 而不是 1.2.1...不明白为什么应该添加清理和资源

【解决方案2】：

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

Here 是更新后的小提琴。

除了设置的变化，还需要像@nubinub建议的那样在范围输入中添加ng-model。

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

【讨论】：

为什么要添加它？对于没有它的文本输入。
value 是多余的，只需要ng-model。