里面ngRepeat角UI引导模式 [英] Angular UI Bootstrap modal inside ngRepeat

问题描述

我作出的应用程序，在那里我有很多的输入字段。这些输入字段从JSON对象数组领域产生与AngularJS ngRepeat指令，并旁边有一个按钮，打开角度UI引导模式在一个更大的文本区域来编辑该值。我无法弄清楚如何将此模型属性参考角UI引导，这样我可以节省模式所做的更改。由于需要在多个视图此功能，我把它变成一种服务。

I am making an app, where I have a lot of input fields. Those input fields are generated from JSON object array field with AngularJS ngRepeat directive and have a button next to them which open an Angular UI Bootstrap modal to edit this value in a bigger textarea. I cannot figure out how to reference this model property to Angular UI Bootstrap so that I can save the changes made in modal. Since this functionality is needed in multiple views, I turned it into a service.

I have made a plunker to illustrate my problem.

http://plnkr.co/edit/ZrydC5UExqEPvVg7PXSq​​?p=$p$ PVIEW

目前在plunker例如模式包含textarea的，但我会真正需要使用文本角指令，因为这些字段包含一些HTML标记，我会更容易让用户与这个漂亮的插件编辑值。

Currently in plunker example modal contains textarea, but I will actually need to use Text-Angular directive, because those fields contain some HTML markup and I would be easier for users to edit values with this nice addon.

TextAngular

编辑：请，如果你正在服用的时间来回答，你可能会藏汉需要多一点的时间来修改我的plunker例如精确显示您的解决方案会是什么样子，因为似乎每个人谁试图帮助我，觉得他们知道解决的办法，但在现实中它不工作:(谢谢！

Please, if you are taking time to answer, you might aswell take a little more time to edit my plunker example to show exactly how your solution would look like, because seems that everyone who tries to help me, think they know the solution, but in reality it doesn't work :( Thanks!

推荐答案

我个人喜欢装点我的$范围的服务（即$ scope.modalService = ModalService），让我明白了逻辑的来源。在NG-重复，那么你传递值项目进入方法调用：

I personally like to decorate my $scope with the services (i.e. $scope.modalService = ModalService;), so I understand the source of the logic. In the ng-repeat you then pass the value item into the method call:

<div class="input-group">
    <input class="form-control" ng-model="value.value">
    <span class="input-group-addon" ng-click="modalService.openTextEditModal(value)">
       <span class="glyphicon glyphicon-align-justify"></span>
    </span>
</div>

模态服务和模态模板将然后引用对象，在这种情况下，对象的克隆，以帮助状态管理，而不是文本：

The modal service and modal template would then reference the object, in this case a clone of the object to help with state management, not the text:

app.factory('ModalService', function($modal) {
    return {
        openTextEditModal: function(item) {
            var modalInstance = $modal.open({
                templateUrl: 'modal.html',
                backdrop: 'static',
                controller: function($scope, $modalInstance, $sce, item) {
                    var clone = {};
                    angular.copy(item, clone);
                    $scope.clone = clone;
                    $scope.close = function() {
                        $modalInstance.dismiss('cancel');
                    };
                    $scope.save = function() {
                      angular.extend(item, clone);
                      $modalInstance.close();
                    };
                },
                size: 'lg',
                resolve: {
                    item: function() {
                        return item;
                    }
                }
            });

        }
    };
});

通过相应的模态模板更改：

With the corresponding modal template changes:

<div class="modal-header">
    <h3 class="modal-title">Edit text</h3>
</div>
<div class="modal-body">
    <textarea class="form-control" ng-model="clone.value"></textarea>
</div>
<div class="modal-body">
    <button class="btn btn-warning" ng-click="close()">Close</button>
    <button class="btn btn-success pull-right" ng-click="save()">Save</button>
</div>

这篇关于里面ngRepeat角UI引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！