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，但基本的方法可以使用自定义排序依据比较： 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> 

当然，这需要你将右栏改写成对象。