简体   繁体   English

在angularJS中绑定数据

[英]binding data in angularJS

So I have this simple controller in app.js 所以我在app.js中有这个简单的控制器

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

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

And I am trying to bind this to a table ... 我正在尝试将此绑定到表...

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

It turns out that there is two-way data binding for ng-model='data[0].y[$index] but not for ng-model='x1' ! 事实证明,存在ng-model='data[0].y[$index]的双向数据绑定,而不是ng-model='x1'的双向数据绑定!

Anyone knows the reason for this?? 有人知道原因吗?

Check out this page in the wiki. 在Wiki中查看此页面。 https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-repeat https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-repeat

It's all about understanding the difference between objects and primitives when using Angular Scoping. 这是所有有关在使用角度范围设定时了解对象和图元之间差异的信息。

ssm, The data being bound to the $scope is data , right? ssm,绑定到$scopedatadata ,对吗? Unfortunately, you are re-binding a sub-set of data which creates an isolated scope for that specific instance of ng-model. 不幸的是,您要重新绑定一个data子集,从而为该ng-model的特定实例创建一个隔离的范围。 You are trying to bind a new value to the $scope when there was none. 您正在尝试将新值绑定到$ scope时。 It's not the same as saying, ng-model="data" , or data[0].y[$index] where you would be directly referring to the original data structure. 这与说ng-model="data"data[0].y[$index] ,在这里您将直接引用原始数据结构。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM