javascript - 根据数据对 div 进行排序

Question

我正在创建一个基于 html angularjs 的网络应用程序

我有两个 div

第 1 部分

<div class="box1" style="margin-top:20px;"> 
    <span ng-repeat="i in data" style="font-size:14px; font-weight:normal">{{i.div1}}</span>
</div> 

分区2

<div class="box1" style="margin-top:20px;"> 
    <span ng-repeat="i in data2" style="font-size:14px; font-weight:normal">{{i.div2}}</span>
</div> 

在我的 Controller 中

i.div1 is 20

i.div2 is 50

现在我有一个下拉列表

<select>
    <option>more</option>
    <option>less</option>
</select>

如果用户点击 more，则 div 2 应显示在 div 1 上方，如果用户点击 less，div 1 应显示在 div 2 上方，

我需要做什么

Answer 1

听起来您的更多/更少选择不需要从服务器中提取任何内容，它只需要对页面上已有的内容重新排序，对吧？这意味着它不需要与 Angular 有任何关系，只需一个非常简单的 jQuery 客户端事件就可以解决问题:

您需要一种方法来轻松识别这两个 div 和选择的客户端。我给了他们 id 的 div1、div2、moreLessSelect。

<script>
$(function(){
  $("select#moreLessSelect").on("change",function(e){
    if ($(this).val() == 'more')
    {
        $("#div1").before($("#div2"));
    }
    else
    {
        $("#div2").before($("#div1"));  
    }
  });
});
</script>


<select id="moreLessSelect">
  <option value="more">More</option>
  <option value="less">Less</option>
</select>
<div class="box1" id="div1">angular div 1 contents go here</div>
<div class="box2" id="div2">angular div 2 contents go here</div>

(如果您将 div 放入可识别的包装器中，并使用 jQuery 前置或附加函数将所需的 div 移动到顶部或底部，这将更加面向 future - 嗯，有很多好的方法可以做到这一点)。