我怎样才能移动元素到不同的地方在DOM与JS角？

How can I move an element to different places in the DOM with angular js?

我有像这样的元素列表

<ul id="list" ng-controller="ListController">
    <li ng-controller="ItemController"><div>content</div></li>
    <li ng-controller="ItemController"><div>content</div></li>
    <li ng-controller="ItemController"><div>content</div></li>
    <li ng-controller="ItemController">
        <div>content</div>
        <div id="overlay"></div>
    </li>
</ul>

我试图做到的是从一个地方移动到#overlay列表中放置，而不必在每一个我旗隐藏物品的隐藏副本/取消隐藏。

What I'm trying to accomplish is moving the #overlay from place to place within the list without having to have a hidden duplicate in every item that I flag hidden/unhidden.

如果这是jQuery的我可以做这样的事情：

If this was jquery I could just do something like this:

$("#overlay").appendTo("#list li:first-child");

有同等方式的角度做到这一点？

Is there an equivalent way to do this in angular?

推荐答案

由于你澄清我能理解，你有项的列表。你会希望能够在此列表中选择一个项目（刷卡，但可能其他事件一样），然后选定项目显示额外的DOM元素（DIV）。如果其他项被选定它应该是未选中的 - 这种方式只有一个项目应该有一个额外的div显示

Thanks to your clarifications I can understand that you've got a list of items. You would like to be able to select one item in this list (swipe but potentially other events as well) and then display an additional DOM element (div) for a selected item. If the other item was selected it should be un-selected - this way only one item should have an additional div displayed.

如果上面的理解是正确的，那么你可以用简单的NG-重复和NG-显示指令是这样解决这个问题：

If the above understanding is correct, then you could solve this with the simple ng-repeat and ng-show directives like this:

<ul ng-controller="ListController">
    <li ng-repeat="item in items">
        <div ng-click="open(item)">{{item.content}}</div>
        <div ng-show="isOpen(item)">overlay: tweet, share, pin</div>
    </li>
</ul>

，其中在控制器中的code会（显示它的一个片段只）：

where the code in the controller would be (showing a fragment of it only):

$scope.open = function(item){
    if ($scope.isOpen(item)){
        $scope.opened = undefined;
    } else {
        $scope.opened = item;
    }        
};

$scope.isOpen = function(item){
    return $scope.opened === item;
};

下面是完整的jsfiddle：http://jsfiddle.net/pkozlowski_opensource/65Cxv/7/

Here is the complete jsFiddle: http://jsfiddle.net/pkozlowski_opensource/65Cxv/7/

如果您担心有太多的DOM元素，你可以达到同样采用NG-开关指令：

If you are concerned about having too many DOM elements you could achieve the same using ng-switch directive:

<ul ng-controller="ListController">
    <li ng-repeat="item in items">
        <div ng-click="open(item)">{{item.content}}</div>
        <ng-switch on="isOpen(item)">
            <div ng-switch-when="true">overlay: tweet, share, pin</div>
        </ng-switch>        
    </li>
</ul>

下面是的jsfiddle：http://jsfiddle.net/pkozlowski_opensource/bBtH3/2/

Here is the jsFiddle: http://jsfiddle.net/pkozlowski_opensource/bBtH3/2/