Javascript 如何在ng repeat中使用ng开关编辑JSON API数据

我知道这是一个反复出现的问题，但不幸的是，我找不到一个合适的答案

基本上，我从JSON API端点获取数据，该端点使用

ng repeat

显示在表中。现在，我想

ng切换

视图到输入字段，以便修改数据（稍后将其发送回服务器）

Atm，我的解决方案取决于数据中有一个我并不喜欢的属性。我相信有比在检索数据后注入此属性更聪明的方法-有什么建议吗

HTML:

提前谢谢

这里有一个小插曲：

---

我使用的是ng show，但希望这能证明一种更好的方法：

我使用的是

ng show

，只要在需要时将“edit”隐式地附加到对象，因为您不需要立即将其设置为true。缺少该属性将意味着返回false

标记：

{{item.edit？“发送”：“edit”}

对于这种情况，我总是将视图状态封装在指令中。这里的意思是为每一行创建一个指令，并移动

项。编辑该指令中的
标志

下面是一个非常简单的实现：

HTML:



JS:

app.directive（'inplaceEdit'，function（）{
返回{
限制：“A”，
模板：
'' +
'' +
'' +
'' +
“编辑”+
“发送”，
范围：{
项目：'=inplaceEdit'，
sendCallback:“&”
},
链接：功能（范围）{
scope.inEditMode=false；
scope.toEditMode=函数（）{
scope.inEditMode=true；
};
scope.send=函数（）{
sendCallback（{item:scope.item}）；
scope.inEditMode=false；
};
}
};
});

请参见叉形插入：

我想补充一点，使之现代化：

controllerAs
，
bindToController
一些用于回滚/撤消更改的代码（即编辑模式下的“取消”按钮）
使用Angular 1.5.x和单向绑定：
项：'>inplaceEdit'
或将
inplaceEdit
指令与ng模型集成
如果不想将标志放在数据对象上，则需要使用单独的对象来存储它们。使用，可以轻松地将数据对象或元素本身与flags对象关联。如果您针对的是较旧的浏览器，则需要找到类似的方法将数据对象/或元素与flags对象关联

JS

HTML


纵队
编辑
编辑
发送


“$scope.data”在点击“编辑/发送”后不应更改，因为该标志不再位于数据项对象上：
{{data}}
在此处包含相关代码，链接可能会损坏，我们不必去外部站点查看代码。这仍然会在数据对象上放置
编辑
标志，OP希望不必依赖于在数据对象上放置标志。因此，只需在发送前去掉属性？如果OP非常不想打开它，那么创建一个单独的数组映射到此数组，并使用布尔值指示是否正在编辑，例如[1,0,0]。为了简单起见，只需使用与数据相同的索引即可映射。嘿，丹尼尔，谢谢你的建议。我对angular是新手，所以如果我错了，请纠正我，但我有点担心这种方法的性能。使用ng show/-hide会导致很多绑定，这些绑定会在每个摘要中更新，对吗？因此，我想使用ng if/-switch edit：我有很多数据：）分页在列表上……您已经完成了一半，ng show&ng hide切换DOM中已经存在的元素的可见性，而ng switch和ng if从DOM分离并重新附着元素。所以，如果您正在优化页面，则可能首选切换。事实上，它没有很好的记录。尽管如此，摘要周期仍将以任何方式检查它们的状态。准确地说，但所有隐藏的元素都会进行成本性能评估Hey Patrick，感谢此解决方案。这明确地回答了最初的问题，因此这是可以接受的，尽管我正在考虑将标志存储在数据b/c上，但这并不是那么重要。我将在以后更深入地了解WeakMap b/c我不明白你最后一点，因为数据项上的标志不再闪烁。My thaughts atm:在$http.put之后，我将不得不重新同步并重建映射…@conrel，如果您的数据没有更改，例如在
$http.put
回调中您不执行另一个
$scope.data=[…]
，那么映射将保留关联，您就不需要重建映射。“不要在数据项上没有标记的情况下获取最后一点”这意味着
编辑
不再位于
项
对象上，而是位于
标记
对象上，因此您不必在将数据发送回服务器之前“清理”数据
<tbody>
  <tr ng-repeat="item in data" ng-switch on="item.edit" >
    <td ng-switch-default ng-bind="item.color"></td>
    <td ng-switch-when='true'>
      <input type="text" ng-model="item.color" />
    </td>
    <td ng-switch-default><button ng-click="switch(item)">edit</button></td>
    <td ng-switch-when='true'><button ng-click="send(item)">send</button></td>
  </tr>
</tbody>

var app = angular.module('myApp', []);

app.controller('MyCtrl', function($scope) {

  $scope.switch = function (item) {
    if (item.edit) {
      item.edit = false;
    } else {
      item.edit = true;
    }
  };

  $scope.send = function (item) {
    if (item.edit) {
      // data is sent...
      item.edit = false;
    } else {
      item.edit = true;
    }
  };

  $scope.data = [
      {color: 'blue', edit: false},
      {color: 'green', edit: false},
      {color: 'orange', edit: false}];
});

<tbody>
    <tr ng-repeat="item in data" inplace-edit="item" send-callback="send(item)"></tr>
</tbody>

app.directive('inplaceEdit', function() {
  return {
    restrict: 'A',
    template:
      '<td ng-if="!inEditMode" ng-bind="item.color"></td>' +
      '<td ng-if="inEditMode">' +
        '<input type="text" ng-model="item.color" />' +
      '</td>' +
      '<td ng-if="!inEditMode"><button ng-click="toEditMode()">edit</button></td>' +
      '<td ng-if="inEditMode"><button ng-click="send()">send</button></td>',
    scope: {
      item: '=inplaceEdit',
      sendCallback: '&'
    },
    link: function(scope) {
      scope.inEditMode = false;

      scope.toEditMode = function() {
        scope.inEditMode = true;
      };

      scope.send = function() {
        scope.sendCallback({item: scope.item});
        scope.inEditMode = false;
      };
    }
  };
});

let map = new WeakMap();
$scope.editing = function(item){
    return map.get(item).edit;
}
$scope.switch = function (item) {
    let flags = map.get(item);
    if (flags.edit) {
        flags.edit = false;
    } else {
        flags.edit = true;
    }
};
//Note you could combine switch and send into a single toggle function
$scope.send = function (item) {
    let flags = map.get(item);
    if (flags.edit) {
        flags.edit = false;
    } else {
        flags.edit = true;
    }
};
$scope.data = [
  {color: 'blue'},
  {color: 'green'},
  {color: 'orange'}
];
//Create an empty flags object for each data item
for(let item of $scope.data){
   map.set(item,{});
}

<tr ng-repeat="item in data" ng-switch on="editing(item)" >
    <td ng-switch-default ng-bind="item.color"></td>
    <td ng-switch-when='true'>
        <input type="text" ng-model="item.color" />
    </td>
    <td ng-switch-default><button ng-click="switch(item)">edit</button></td>
    <td ng-switch-when='true'><button ng-click="send(item)">send</button></td>
</tr>