可使用 ngrepeat 编辑：自动编辑最新添加的项目

Posted 2023-05-08

【中文标题】可使用 ngrepeat 编辑：自动编辑最新添加的项目

【英文标题】：editable with ngrepeat: automatically editing the latest added item

【发布时间】：2013-11-30 06:11:02

【问题描述】：

我需要将新项目添加到集合中，使用 ngrepeat 呈现并使用 xeditable 使其自动可编辑。

顺便说一句，我正在使用 xeditable 的“手动触发”方法。

这里是 html

<h4>Angular-xeditable demo</h4>
<div ng-app="app" ng-controller="Ctrl" style="margin: 50px">
<div class="btn btn-default" ng-click="addNew()">+</div>
<ul>
  <li ng-repeat="item in array | orderBy:'-value'">
    <a href="#" e-form="itemForm" editable-text="item.field"> item.field </a>
    <i ng-show="!itemForm.$visible" ng-click="itemForm.$show()">edit</i>
  </li>
</ul>
</div>

这里是控制器：

var app = angular.module("app", ["xeditable"]);

app.run(function(editableOptions) 
  editableOptions.theme = 'bs3';
);

app.controller('Ctrl', function($scope, $filter) 

  $scope.array = [
    value: 1, field: 'status1',
    value: 2, field: 'status2',
    value: 3, field: 'status3',
    value: 4, field: 'status4'
  ]; 

  $scope.addNew = function()
    $scope.array.push(value:$scope.array.length+1, field: 'enter text here');
    //MAKE IT EDITABLE????????
  
);

看看这个fiddle中的问题：http://jsfiddle.net/dpamio/hD5Kh/1/

【问题讨论】：

请解释问题

当它说“//使其可编辑？？”我的意思是，在添加元素后将其置于“编辑模式”。

OK..现在明白了...为什么不让用户先创建新的，然后推送到数据数组？可能更简单。将添加按钮更改为 dsplay 输入和保存按钮...保存时隐藏输入并将该模型推送到 $scope.array

是的，这可行。只是我想强调最大的双向绑定。如果我能做到，我不需要任何“额外”表格（这是我目前的解决方案）。

我认为您必须修改可编辑指令才能在编辑模式下打开它

【参考方案1】：

Here is a updated fiddle that works。由于指令的编写方式以及ng-repeat 的工作方式，它需要一个非常 hacky 解决方案...

app.controller('Ctrl', function($scope, $filter, $timeout) 

  $scope.itemForms = ;

  $scope.addNew = function()
    $scope.array.push(value:$scope.array.length+1, field: 'enter text here');

     // Use timeout to force evaluation after the element has rendered
     // ensuring that our assignment expression has run
     $timeout(function() 
         $scope.itemForms[0].$show(); // last index since we sort descending, so the 0 index is always the newest
     )
  

ng-repeat 工作原理的背景知识：ng-repeat 将为每个重复的元素创建一个新的子作用域。该指令使用传递给e-form 的字符串作为其名称（在本例中为itemForm）在该范围内分配一个变量。如果它更聪明，它将允许对赋值进行表达式评估。 （然后我们可以将它分配给父范围，并在控制器中访问它，但这是另一回事）。

由于我们没有任何方法可以在指令之外访问这个子范围，所以我们做了一些非常糟糕的事情。我们在 display none 的范围内使用 mustache 表达式将 itemForm 变量分配给父范围，以便我们以后可以使用它。然后在我们的控制器内部，我们使用查找值来调用我们期望的itemForm.$show() 方法。

将那一点讨厌的东西抽象成一个角度指令，我们可以写如下：

.directive('assignFromChild', function($parse) 
    return 
        restrict: 'A',
        link: function(scope, el, attrs) 
            scope.$watch(function()  return $parse(attrs.assignFromChild)(scope); , function(val) 
                $parse('$parent.' + attrs.toParent).assign(scope, val);
            )
        
    ; 
);

允许我们的 HTML 返回到：

<ul>   
  <li ng-repeat="item in array | orderBy:'-value'" assign-from-child="itemForm" to-parent="itemForms[$index]">
    <a href="#" e-form="itemForm" editable-text="item.field"> item.field </a>
    <i ng-show="!itemForm.$visible" ng-click="itemForm.$show()">edit</i>
  </li>
</ul>

Here is a fiddle with my final solution

【参考方案2】：

我找到了一个非常简单的解决方案，使用ng-init="itemForm.$show()"，它会在插入新项目时激活可编辑表单。

这是回答问题的更新后的 jsFiddle：http://jsfiddle.net/hD5Kh/15/