停止双向数据绑定模型
问题描述:
我对Angular相当陌生,所以如果这里有一些不正确的想法,请告诉我。停止双向数据绑定模型
我想根据相同的数据集创建两个单独的范围变量。我认为我只是可以将它们设置为不同的变量(如下所示),它会起作用。然而,我发现无论他们被命名了什么或者他们是如何定义的(甚至在一个指令中!),改变它们都会改变它们。
所以......我期望/希望看到的是,如果我改变顶部重复中的输入,它将只会改变重复的模型。目前它改变了所有三个。
我要去哪里错了吗?我认为这与双向数据绑定有关。提前致谢!
HTML:
<h4>data</h4>
<div ng-repeat="person in data">
{{person.name}}
<input ng-model="person.name" />
</div>
{{data[0].name}}
<br>
<br>
<h4>testData</h4>
<div ng-repeat="person in testData">
{{person.name}}
<input ng-model="person.name" />
</div>
{{testData[0].name}}
<h4>Directive</h4>
<div tester data="data"></div>
指令HTML:
<div ng-repeat="person in data">
{{person.name}}
<input ng-model="person.name" />
</div>
{{data[0].name}}
JS:
var app = angular.module('test', []);
(function() {
var testController = function ($scope) {
var data = [
{name:'Jordan', age:30},
{name:'Sean', age:32},
{name:'Seth', age:26}
];
$scope.data = data;
$scope.testData = data;
}
testController.$inject = ['$scope', '$http'];
app.controller('testController', testController);
}())
app.directive('tester', function(){
return {
restrict: 'A',
templateUrl: 'directive.html',
//If percent = true then that table should have a "percent change" th
scope:{
data: '=data'
}
}
})
答
我试图根据相同的 数据集创建两个单独的作用域变量。我以为,我只想能够将它们设置为不同的 变量(如下图所示),它会工作
其实这两个JavaScript变数指向内存中的相同的数据结构。所以当你修改这个结构时,它反映了它们两个。将那些data
和testData
变量看作指向相同数据的指针。
你可以copy
,才能在内存中创建的这2种不同的情况下,这种数据结构,从而改变一个不反映到其他的变化:
$scope.data = data;
$scope.testData = angular.copy(data);
,如果你想在反映这个你的指令,继续克隆要传递到它,以及实例:
<div tester data="angular.copy(data)"></div>
答
这里既有数据和TESTDATA指向相同的引用,为什么他们正在复制相同value.There 2个解决方案,我们可以申请,如果有函数r eference,日期对象,以及复制后需要在对象中的任何未定义的值,那么适当的选项是$ scope.testData = agular.copy(data);
另一个选项$ scope.testData = JSON.parse(JSON.stringify(data));但是下面的键不会被拷贝。
- 功能。
- Date对象
- 与价值属性未定义
这工作完全是正是我一直在寻找。搞定了。我会尽快接受! – Aarmora 2014-10-07 19:58:09
哈,没办法...昨天我遇到了这个确切的问题。希望我昨天知道这件事! – Ronnie 2014-10-07 22:05:15
@DarinDimitrov真棒解决方案 – 2017-03-16 12:56:49