Question

使用ng-model和button进行数据绑定时，我遇到了一个恼人的问题。

我网站的运作原则：

我的HTML网站显示projects列表（从外部.json文件加载）。
每行都有一个名为Edit的按钮，其中显示modal，其中包含一些<input type="text"，其中包含有关项目的相关数据（如project.name，project.date等。）
输入的初始value等于对象数据（名为Name的文本输入将包含project.name等。）
仅当您单击Save按钮并确认操作（confirm(sometext)正常）时，才会修改对象。关闭模式，而不是单击按钮或在确认框上按cancel可能会阻止数据更新。
编辑输入（假设project.name是“Project2”并且我通过添加3个数字来修改它，导致“Project2137”），关闭模式并再次打开它应该导致输入中的“Project2”文本（因为对象未被修改，仅输入）

到目前为止，我理解单个文本输入应该如下所示

<input type="text" id="editName" class="form-control" ng-model = "project.name">

使用ng-model表示它们已绑定。这就是我所知道的。但是编辑输入意味着只要我输入一些数据就会更新对象。我试图摆弄ng-model-options，但我找不到任何可能的解决方案。

我尝试使用

<input type="text" id="editName" class="form-control" value = {{project.name}}>
....
<button type="button" class="btn pull-right btn-primary btn-md" ng-click="edit(project)" data-dismiss="modal" >Save</button>

功能：

$rootScope.edit = function(project)
    {
        if(confirm("Are you sure to save changes?"))
            {
                 project.name = angular.element(document.getElementById('editName')).val();
             //  ...and so on with other properties

这个解决方案有点接近我想要实现的目标（对象仅在确认时更新），但我遇到了另一个问题：我 nput只在开始时从对象加载数据而不是每次模态都是打开，违反规则＃5

有没有办法使用ng-model绑定或自定义函数来解决这个问题？或者也许还有其他更简单的方法？

- 编辑 -

在这里，使用按钮保存数据没有任何问题，一切正常，点击保存会反映在projects列表中。（直到我按下F5键）。问题是输入文本没有正确绑定到project，这就是我想要解决的问题。

样本数据（伪代码）

project1.name =“Proj1” project2.name =“Proj2”
我点击第1行
文本输入显示“Proj1”。一切都很好。
我通过添加一些随机字符来改变输入，例如“Proj1pezxde1”
文字输入现在为“Proj1pezxde1”
我不点击Save按钮。
我关闭模式。
项目摘要仍显示“Proj1”。好。
我点击第一行的编辑按钮

10。即使我没有修改对象，文本输入也是“Proj1pezxde1”。

文本输入应该再次从对象读取数据（每次打开此模态），从而显示“Proj1”

这是我想解决的问题。抱歉有点不准确。

Answer 1

根据我的理解，在阅读提供的描述之后，您有一个项目列表，这些项目正在转发器中使用，并且您希望将每个项目数据绑定到文本框和按钮。

您是否尝试过以下方式初始化您的Projects对象？

$scope.projects = [
        { 'name': 'proj1', 'id': '1' },
        { 'name': 'proj2', 'id': '2' }
    ];

然后您可以执行以下操作来显示您的数据

<div ng-repeat="project in projects">
    <div>
       <input type="text" class="form-control" ng-model = "project.name">
       <button type="button" class="btn pull-right btn-primary btn-md" ng-click="edit(project)" data-dismiss="modal" >Save</button>
    </div>
</div>

Answer 2

在我看来，最简单的方法是使用第二个对象，该对象是项目的副本，并在确认后将更改应用于原始项目对象。

例如，一个简单的伪代码＆＃34;控制器：

function MyCtrl($scope) {
    $scope.projects = [...];
    $scope.currentProject = null;

    $scope.edit = function(project) {
        $scope.currentProject = angular.copy(project); // This will create a copy so the changes in $scope.currentProject will not reflect.
        // Open dialog with input bound to $scope.currentProject
        if (confirm) {
            // Assign all properties from currentProject to project
            angular.extend(project, $scope.currentProject);
        }
    }
}

Answer 3

因此，正如我从您的问题中所理解的那样，只有在保存项目数据时才需要更新项目数据。要做到这一点，你可以保留一个实际对象的副本，只有保存更新，如下所示：

这里我们使用angular.copy()，它执行源对象的深层复制。

$scope.original = {name : "xyz"};
$scope.project = angular.copy(original);

//Call this when the user confirms to save , here we are replacing the 
//original copy with the latest object that needs to be saved.

$scope.save = function () {
  $scope.original = angular.copy($scope.project);
}

//Call this when closing the modal or clicking cancel or when losing     
//focus, this will reset the changes to the original copy.

$scope.reset = function () {
  $scope.project = angular.copy(original);
}

Answer 4

您可以在模态控制器中创建项目对象的副本，并使用此对象与模态的输入元素绑定

itertools.combinations()

仅在单击保存时将复制对象属性分配给项目。

AngularJS - 使用按钮单击绑定ng-model

4 个答案: