2016-02-08 2 views
1

Так что у меня этот простой контроллер в app.jsсвязывания данных в angularJS

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

Кто-нибудь знает причину этого ??

+0

здесь хорошо [пояснил ответ] (http://stackoverflow.com/a/13723990/2435473) –

ответ

2

Проверьте эту страницу в wiki. https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-repeat

Все дело в понимании разницы между объектами и примитивами при использовании углового охвата.

+0

Спасибо! Это отличная статья! – ssm

+0

Да, я узнал об этом нелегко. : D –

2

ssm, Данные привязаны к $scope: data, справа? К сожалению, вы повторно привязываете подмножество data, который создает изолированную область для этого конкретного экземпляра ng-модели. Вы пытаетесь связать новое значение с областью $, когда ее не было. Это не то же самое, что сказать: ng-model="data", или data[0].y[$index], где вы будете непосредственно ссылаться на исходную структуру данных.

Смежные вопросы