Question

我有以下代码（我无法将所有代码放在这里，因为它非常大，所以我只提取了与此问题相关的代码）。

我可以添加项目（通过我在addItem()上调用ng-submit的其他地方的单独表单）并在页面上列出它们。当我单击每个项目旁边的编辑按钮时，这将打开一个模态面板，其中包含当前项目的信息。但是当我更改值时，由于双向数据绑定，它们会在$ scope上自动更新。

我想要实现的是当前项目和$ scope仅在我提交表单时更新（通过单击提交按钮），这样我也可以单击“取消”按钮并中止操作。我猜是某种Update函数，但不知道该放什么。

另外，我正在为项目中的每个项目重复一个模态，但我不认为这是最佳实践。关于如何优化的任何建议都是受欢迎的。

我的问题的第三部分是，当模态加载时，如何从选项列表中将ng-model item.color显示为“selected”？

JS

$scope.colors = [
  "blue",
  "green",
  "red"
];

$scope.items = [
  {
   name: "apple",
   color: "red"
  },
  {
   name: "pear",
   color: "green"
  }
];

$scope.addItem = function (itemName,itemColor) {
  $scope.items.push({
    name: itemName,
    color: itemColor
  });
};

$scope.editItem = function () {
  ???
};

HTML

<ul>
  <li ng-repeat="item in items">
    <span>{{$index}} - {{item.name}} - {{item.color}}</span>
    <button data-toggle="modal" data-target="#itemEditModal{{$index}}">
      Edit
    </button>
  </li>
</ul>

<div class="modal fade" ng-repeat="item in items" id="itemEditModal{{$index}}">
  <div class="modal-dialog">
    <form ng-submit="editItem(item)">
      <div class="modal-content">
        <div class="modal-body">
          <div class="form-group">
            <label>Name</label>
            <select class="form-control" ng-model="item.color" ng-options="color in colors">
            </select>
          </div>
          <div class="form-group">
            <label>Name</label>
            <input type="text" ng-model="item.name">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal">Cancel</button>
          <button type="submit">Save changes</button>
        </div>
      </div>
    </form>
  </div>
</div>

Answer 1

我将从问题的第二点开始，即为每个项目创建一个单独的模态。是的，这是一个不好的做法，只是想象有大量的项目。太多的东西都不好。

回到第一部分，我要做的是：

单击编辑按钮时，添加一个逻辑，将所选项目保存在临时$ scope变量中，并将其绑定到模态。您知道当前选择的项目进行编辑。在提交表单和关闭模态时清除该变量。
进行必要的更改并点按“提交”。您可以在这里对items数组执行循环，当索引项与临时范围变量中的id匹配时，将其值替换为更新的临时范围。这将在转发器中显示更新的项目。

请您详细说明问题的第三部分，因为我无法理解您的需求。你暗示与css有关的东西吗？

如何从模态提交更新$ scope？

1 个答案: