javascript - AngularJS 使用 ng-focus 将列表项移动到列表顶部

Question

我正在使用 AngularJS，当单击/聚焦特定输入时，我希望与该输入关联的列表项移动到列表顶部(最好从顶部向下推)

我一直在尝试包括 ng-focus 和 ng-if 在内的一些技术，但没有任何运气能让它正常工作。

如有任何帮助，我们将不胜感激。

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;
}

Answer 1

您可能想要添加 ngAnimate，但基本方法可以使用自定义 orderBy 比较器: FIDDLE

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

MyCtrl = function($scope) {
$scope.focus == null;
$scope.texts = [{h3:'Motive',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?'},{h3:'Employment Type',p:'Self employed - explain net profit (taxable income) Contracts - renewable? how many time renewed? Cover only applies to end of contract'}];
$scope.compare = function(a,b){
return a.h3 == $scope.focus?-1:1
}
}

和

      <li ng-repeat="text in texts |orderBy:compare">
        <h3>{{text.h3}}</h3>
        <p>{{text.p}}</p>
      </li> 

当然，这需要你将right column重写成object。