使用 Angular 向单个列表项添加功能答案

【问题标题】：Adding functionality to individual list items with Angular使用 Angular 向单个列表项添加功能
【发布时间】：2014-05-05 16:18:03
【问题描述】：

我有一个项目列表，每个项目都有一个删除按钮。当您单击删除按钮时，它应该会显示“您确定吗？”按钮。目前，每个列表项或项目项都位于我从服务器获取的数组中。

<button ng-class="{show: deleting}"> are you sure? </button>

然而，每个项目都需要有这个布尔“删除”，以显示用户是否正在考虑删除项目项目。我应该只为每个列表项添加一个布尔变量“删除”吗？

如果这样做，我不希望它存在于服务器上，我应该在同步之前将其删除吗？

【问题讨论】：

当被问到“你确定”问题时，用户如何选择“否”？
我真的不明白你的问题是什么。如果您不想要服务器端的变量，请不要将其发送到服务器 - 就这么简单，您自己基本上已经这么说了。拥有一个删除变量似乎是一种方法，或者您可以编写自己的指令。你描述的问题很简单。
@dirkk 抱歉，如果这看起来微不足道，我很难说出我想说的话，所以我选择了一个简单的例子。本质上，我试图找到一种干净的方法来将变量添加到模型中，每当我同步时都会被忽略。

标签： javascript angularjs list factory

【解决方案1】：

如果您只想在客户端使用变量，而不将其发布到服务器，您应该使用前面带有 $$ 符号的 te 变量。例如：

<button ng-class="{show: $$deleting}"> are you sure? </button>

当您使用 angular.toJson() 函数将 json 发布到服务器时，它会将 json 转换为字符串，忽略以 $$ 字符开头的所有属性。所有角度函数（等于等）都具有相同的行为

【讨论】：

除非你不应该在用户范围内的变量和函数名称中使用 $ 和 $$ - angularjs 保留这些名称。
如果任何时候 AngularJS 将 $$deleting 添加到 $scope 变量，此代码将失败。考虑到 AngularJS 2.0 的数据持久性特性，一个名为 $$deleting 的字段并非完全不可能。至少称它为非特定的东西，比如 $$myHackyFieldDeleting

【解决方案2】：

最简单的方法是在模型中有一个“ToBeDeleted”集合和两种方法来a）推送项目，b）检查它是否在集合中。像这样的东西（可能无法运行，我无法测试代码，但该方法应该有效）

function Ctrl($scope) {

   $scope.items = [ {id:1, title: 'item1'}, {id:2, title: 'item2'}];

   $scope.toDelete = [];

   $scope.softDelete = function(item) {
      $scope.toDelete.push(item);
   }

   $scope.isDeleted = function(item) {
     return $scope.toDelete.indexOf(item) > -1;
   }
}



<ul ng-controller="Ctrl">
    <li ng-repeat="item in items">
      {{item.title}}
      <button  ng-click="softDelete(item)" ng-hide="isDeleted(item)">Delete</button>
      <span  ng-show="isDeleted(item)">Item is about to be deleted</button>
    </li>
</ul>

【讨论】：

【解决方案3】：

这是一个可能的解决方案。

function Main() {
  this.items = [{
      name: 'first',
      examples: [
          {name: 'first sub1'},
          {name: 'first sub2'}
      ]},{
      name: 'second',
      examples: [
          {name: 'second sub1'},
          {name: 'second sub2'}
      ]}
  ];

    this.addExample = function(item) {
        item.examples.push({name: 'new item'});
    };
}

【讨论】：