angularJS中的绑定数据

时间:2016-02-08 21:22:06

标签: javascript angularjs

所以我在app.js中有这个简单的控制器

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

app.controller('PlotCtrl1', function ($scope) {
    $scope.data = [{
        x: [1, 2, 3, 4],
        y: [10, 15, 12, 17]}];
});

我正试图把它绑在桌子上......

<!DOCTYPE html>
<html>
<head lang="en">
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="graphPlotterDemoApp">

before div = PlotCtrl1
<div  ng-controller="PlotCtrl1">
    {{data}}
    <table>
    <thead><tr><td>x</td><td>y</td></tr></thead>
    <tbody ng-repeat='x1 in data[0].x'>
        <tr>
            <td><input type='number' ng-model='x1'></td>
            <td><input type='number' ng-model='data[0].y[$index]'></td>
        </tr>    
    </tbody>
    </table>
</div>     
</body>
</html>

事实证明ng-model='data[0].y[$index]有双向数据绑定,但ng-model='x1'没有!

任何人都知道这个的原因??

2 个答案:

答案 0 :(得分:2)

在wiki中查看此页面。 https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-repeat

在使用Angular Scoping时,了解对象和基元之间的区别。

答案 1 :(得分:2)

ssm,绑定到y的数据是$scope,对吗?不幸的是,您正在重新绑定data的子集,该子集为该特定的ng-model实例创建了一个独立的范围。您尝试将新值绑定到$ scope时没有。这与您直接引用原始数据结构的datang-model="data"不一样。