我有一个 Angular/Firebase 应用程序，它允许用户从部件列表中选择一个部件。每个部分都有多个字段，我希望用户能够编辑他们选择的部分的字段。一切都应该三向绑定(bind)到 Firebase，并且所有更新都自动同步。
我的 Firebase 数据如下所示:
{
"partList": {
"part1": {
"field1": "value1",
"field2": "value2",
"field3": "value3"
},
"part2": {
"field1": "value1",
"field2": "value2",
"field3": "value3"
},
"part3": {
"field1": "value1",
"field2": "value2",
"field3": "value3"
}
}
}
零件 list 是用这个 ng-repeat 完成的:
<div ng-repeat="(key,value) in partList">{{key}}</div>
但是，我不确定如何为每个部分的 3 个字段添加表单字段，并在用户单击列表中的一个时让它们正确绑定(bind)到正确的部分。
我尝试在单击某个部分时将 $bindTo 与 $scope 变量一起用于正确的 Firebase 子项，但是在同一范围变量上多次调用 $bindTo 导致出现奇怪的状态，即 Firebase 中的多个对象似乎被绑定(bind)彼此之间似乎不起作用(例如，当我进行更多绑定(bind)时，先前的绑定(bind)并没有停止)。
我可以将对象复制到不同的 $scope 变量，然后将该对象建模到我的输入字段，但是当我这样做时我失去了三向绑定(bind)并且必须手动更新 Firebase。
正确的做法是什么？
最佳答案
AngularJS 使用一个简单的指令处理绑定(bind)。对于表单输入，您可以使用“ng-model”，对于可点击的链接，您可以使用“ng-click”。我不熟悉 Firebase，所以在没有看到您的其余代码的情况下，我无法解决您的 3 向绑定(bind)问题。
您可以将这些值注入(inject)全局范围，但最好不要这样做，尤其是在您编写大型应用程序时。
此外，您可能需要考虑将数据转换为对象数组，就像我在下面的 script.js 中所做的那样。我并不是说这是唯一的方法，但看起来要完成您想要完成的事情要简单得多。
这是我的 Index.Html:
<!DOCTYPE html >
<html data-ng-app="myApp">
<head>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-controller="MainController as mc">
<h3>Select Part</h3>
<div ng-repeat="part in mc.partList">
<a href ng-click="mc.selectPart(part)">{{part.id}} </a>
<ul>
<li >{{part.field1}}</li>
<li>{{part.field2}}</li>
<li>{{part.field3}}</li>
</ul>
</div>
<form action="">
<h3>Edit Part</h3>
Selected Part = {{mc.selectedPart.id}}
<br><br>
Field 1: <input type="text" ng-model="mc.selectedPart.field1">
<br><br>
Field 2: <input type="text" ng-model="mc.selectedPart.field2">
<br><br>
Field 3: <input type="text" ng-model="mc.selectedPart.field3">
<br><br>
<input type="submit"> <!--TODO Wire up the submit button to bind data to a data access layer-->
</form>
</body>
</html>
还有 Script.js
(function() {
var app = angular.module('myApp', []);
app.controller('MainController', MainController);
function MainController() {
var me = this;
me.partList = [{
"id": "part1",
"field1": "value1",
"field2": "value2",
"field3": "value3"
}, {
"id": "part2",
"field1": "value1",
"field2": "value2",
"field3": "value3"
}, {
"id": "part3",
"field1": "value1",
"field2": "value2",
"field3": "value3"
}];
me.selectPart= function(part) {
me.selectedPart = part;
};
}
})();
关于javascript - 从对象列表中一次编辑一个对象的正确 Angular/Firebase 方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29217432/