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

发布时间：2020-12-17 10:26:23 所属栏目：安全来源：网络整理

导读：我需要向集合添加新项目,使用ngrepeat呈现并使用xeditable使其自动编辑. 顺便说一下,我正在使用“手动触发”方法进行xeditable. 这是HTML h4Angular-xeditable demo/h4div ng-app="app" ng-controller="Ctrl" style="margin: 50px"div class="btn btn-defaul

我需要向集合添加新项目,使用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????????
  }
});

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

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

app.controller('Ctrl',$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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!