Как изменить порядок элементов div в AngularJS?

Question

Как изменить порядок элементов div, который включает в себя текстовое поле и выпадающее меню с привязкой данных углов ?. Порядок div должен изменяться соответственно, когда пользователь вводит значение, если пользовательский тип A, тогда div A должен быть сверху, если тип пользователя - B, тогда div B должен быть сверху, а другие элементы div будут ниже этого и т. Д. Приложение чисто сделано в AngularJS.

Вот HTML:

<div id="A"> A <input type="text" ng-model="Model.AName" disabled /></div> 
<div id="B"> B <input type="text" ng-model="Model.BName" disabled /></div> 
<div id="C"> C <input type="text" ng-model="Model.CName" disabled /></div> 

В AngularJS контроллер:

$scope.orderArr = [{ "A": 2}, { "B": 3 }, { "C": 1 }]; 

Результат будет: C B

Answer 1

Для управления заказа вы должны создать массив представляют входы.

$scope.inputs = [ 
    { 
    name: 'AName', 
    order: 1 
    }, 
    { 
    name: 'BName', 
    order: 2 
    }, 
    { 
    name: 'CName', 
    order: 0 
    } 
]; 

А затем отобразить его с помощью цикла:

<div id="A" ng-repeat="input in inputs | orderBy: 'order'"> 
    {{ input.name }} 
    <input type="text" disabled ng-model="Model[input.name]"> 
</div> 

Таким образом, вы можете управлять заказ в контроллере, изменив свойство order. Вы можете создавать условные операторы, которые в зависимости от разрешения устанавливают порядок ваших входов.