AngularJS use ng-focus to move list item to top of list

Viewed 523

I'm using AngularJS and when a specific input is clicked/in focus i would like a list item associated with that input to move to the top of the list (preferably pushing down from the top)

I've been trying a few techniques including ng-focus and ng-if but haven't had any luck in making it work correctly.

Any help would be greatly appreciated.

Here is my fiddle

HTML

     <label class="control-label">Motive :</label>
     <input type="number" ng-model="payment.cash" ng-focus="addItem()" />

     <br>

     <label class="control-label">Employment Type :</label>
     <input type="number" ng-model="payment.check" ng-focus="addItem()" />

     <br>

     <label class="control-label">Money Order :</label>
     <input type="number" ng-model="payment.money_order" />

</div>

<div class="oneHalf">
    <h2>Help Text</h2>

    <ul class="help-text">

      <li>
        <h3>Motive</h3>
        <p>What made you go online today? What spurred you into action? Cost, Replacing cover, Family, job change What did you see online that appealed to you?</p>
      </li> 

      <li>
        <h3>Employment Type</h3>
        <p>Self employed - explain net profit (taxable income) Contracts - renewable? how many time renewed? Cover only applies to end of contract</p>
      </li>

      <li>
        <h3>Budget</h3>
        <p>What can the client comfortably afford? Check against salary</p>
      </li>

      <li>
        <h3>Industry</h3>
        <p>Check the Trent watch list clack here</p>
      </li> 

     <li>
        <h3>Life Sum</h3>
        <p>There is no normal<br>
        Salary x years of dependancy<br>
        10 x Salary<br>
        Funeral - what impact will inflation have on the sum assured!</p>
      </li> 
    </ul>

JS:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
}

CSS

.oneHalf {
  width:50%;
  float:left;
}

ul, li {
  list-style:none;
  margin:0;
  padding:0;
}

.help-text {
  position:relative;
}

.test {
  background:red;
  display:block !important;
}
1 Answers
Related