Question

我正在创建一个基于html angularjs

的网络应用程序

我有两个div

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>

Div2的

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

在我的控制器中

i.div1 is 20

i.div2 is 50

现在我有一个下拉列表

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

如果用户点击更多，则div 2应显示在div 1上方，如果用户点击较少div 1显示在div 2上方，

我需要做什么

Answer 1

这是解决方案：

您必须使用ng-show指令。如果条件为true，则会显示div2，否则，div2将被隐藏。

＆＃13;

function TodoCtrl($scope) {
  $scope.data=[{"div1":20}];
   $scope.data2=[{"div2":50}];
  $scope.change=function(){
      var div1 =  $('.box1').eq(0).clone();
      var div2 = $('.box1').eq(1).clone();
      switch($scope.myValue){
        case "more":
            $('.box1').eq(0).replaceWith(div2);
            $('.box1').eq(1).replaceWith(div1);
            break;
        case "less":
            $('.box1').eq(0).replaceWith(div2);
            $('.box1').eq(1).replaceWith(div1);
            break;
            
      }
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app>
  <div ng-controller="TodoCtrl">
  <select ng-change="change()" ng-model="myValue">
     <option>more</option>
     <option>less</option>
   </select>
       <div class="box1" style="margin-top:20px;"> 
            <span ng-repeat="i in data" style="font-size:14px; font-weight:normal">{{i.div1}}</span>
    </div> 
   <div class="box1" style="margin-top:20px;"> 
        <span ng-repeat="i in data2" style="font-size:14px; font-weight:normal">{{i.div2}}</span>
   </div>

  </div>
</div>

＆＃13;

Answer 2

听起来你的选择更多/更少并不需要从服务器中提取任何内容，只需重新排序页面上已有的内容，对吧？这意味着它不需要与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 prepend或append函数将所需的div移动到顶部或底部，这将是更具前瞻性的 - 好吧，有很多好的方法可以做它）。

按数据排序div

2 个答案: