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

Question

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

我尝试了一些技术，包括ng-focus和ng-if，但没有成功使其正常工作。

任何帮助都将不胜感激。

这是我的代码示例

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

- DBoi

---

你有一个我可以参考的示例吗？ - DBoi

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> 

当然，这需要您将右列重写为对象。

- Michał Sałaciński