如何使用 angular.js 在 DOM 中移动视图？

如何使用 Angular JS 将元素移动到 DOM 中的不同位置？

我有一个像这样的元素列表

<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 在列表中从一个位置移动到另一个位置，而不必在我标记为隐藏/未隐藏的每个项目中都有隐藏的重复项。

如果这是 jquery 我可以这样做：

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

有没有等效的方法可以用角度来做到这一点？

感谢您的澄清，我了解到您已经获得了一份项目清单。您希望能够选择此列表中的一项（滑动，但也可能发生其他事件），然后显示所选项目的附加 DOM 元素 (div)。如果选择了其他项目，则应取消选择它 - 这样只有一个项目应显示额外的 div。

如果上述理解是正确的，那么您可以使用简单的 ng-repeat 和 ng-show 指令来解决这个问题，如下所示：

<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>

控制器中的代码位置（仅显示其中的一部分）：

$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/ http://jsfiddle.net/pkozlowski_opensource/65Cxv/7/

如果您担心 DOM 元素过多，您可以使用 ng-switch 指令实现相同的效果：

<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/ http://jsfiddle.net/pkozlowski_opensource/bBtH3/2/