Tengo dos divs que quiero mostrar en la página. El orden de los dos div depende del valor de una variable en el alcance.

La forma trivial de hacer esto es repitiendo el código divs dos veces en la página, cada vez en un orden diferente:

<div class="option 1" ng-if="value">
  <div class="div 1">
    <p>"this is the content for div 1"</p>
  </div>
  <div class="div 2">
    <p>"this is the content for div 2"</p>        
  </div>
</div>

<div class="option 2" ng-if="!value">
  <div class="div 2">
    <p>"this is the content for div 2"</p>
  </div>
  <div class="div 1">
    <p>"this is the content for div 1"</p>
  </div>
</div>

¿Hay otra forma de hacer esto, sin repetir el código?

0
Asher 27 ene. 2016 a las 10:52

3 respuestas

La mejor respuesta

Si no es compatible con IE9, supongo que puede usar la propiedad CSS de orden flexbox con una clase condicional.

<div class="main">
  <div ng-class="{after: !value}">this is the content for div 1</div>
  <div class="fixed">this is the content for div 2</div>
</div>

Y el CSS:

.main { display: flex; flex-direction: column; }
.fixed { order: 2; }
.after { order: 3; }

Vea el pedido de flexbox en acción: https://jsfiddle.net/a6eaov63/2/

2
j3r6me 27 ene. 2016 a las 08:43
(function(angular) {
  'use strict';
angular.module('orderDivs', [])
  .controller('orderController', ['$scope', function($scope) {
    //$scope.variable = true; //uncomment this line to reverse the div .. 
    $scope.divList = [{'div':'option 1','condition':'true', 'content':'THIS IS DIV 1111'},{'div':'option 2','condition':'false', 'content':'THIS IS DIV 2222'}]
      if ($scope.variable){
        $scope.divList = $scope.divList.reverse();
      } 
      $scope.changeOrder = function(){
        $scope.divList = $scope.divList.reverse();
      }
    }]);
})(window.angular);



<!-- in views -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
  <script src="script.js"></script>

</head>
<body ng-app="orderDivs">
  <div ng-controller="orderController">
    <input type="checkbox" ng-click="changeOrder()" ng-model="variable"/>
    <div ng-repeat="opt in divList">
      <div class="option" ng-model="opt.div" ng-if="opt.condition">
        <div>
          {{opt.content}}    
        </div>
     </div>
   </div>
  </div>
</body>
</html>
1
SuperNova 27 ene. 2016 a las 09:50

ACTUALIZACIÓN: puede mover cada <div> a un archivo externo e incluirlo en el orden adecuado según value.

<ng-include src="value ? 'div1.html' : 'div2.html'"></ng-include>
<ng-include src="value ? 'div2.html' : 'div1.html'"></ng-include>
1
Egan Wolf 27 ene. 2016 a las 08:42