Question

如果我有两个或更多复选框，我如何将未选中的复选框移动到已选中的复选框下方。目前我在下面有简单的HTML，所以如果选中Checkbox 2，它应该移动到顶部，Checkbox 1应该向下移动。

我想到的两种方法是：

在示波器上创建并使用数组，并使用ng-repeat填充复选框，然后根据天气应用过滤器，或者不选中复选框或拼接数组。唯一的问题是我不想在示波器上定义我的复选框。
创建一个指令以某种方式操纵dom元素。

如果有人遇到类似问题，您会建议哪种解决方案最好？

<div class="col-md-6">
    Please check one or more boxes <i tooltip-placement="bottom" tooltip="On the Bottom!" class="fa fa-question-circle"></i>
    <span ng-show="checked || checked_2" class="glyphicon glyphicon-ok text-success"></span>
    <span ng-hide="checked || checked_2" class="glyphicon glyphicon-remove text-danger"></span>
    <div class="checkbox">
        <label>
            <input ng-model="checked" type="checkbox" value="1">
            Checkbox 1
        </label>
    </div>
    <div class="checkbox">
        <label>
             <input ng-model="checked_2" type="checkbox" value="2">
             Checkbox 2
        </label>
    </div>
    <div ng-hide="checked || checked_2" class="text-danger">Some error message!</div>
    <br/>
</div>

Answer 1

尝试使用orderBy过滤器：

JS

var app = angular.module("app", []);
app.controller('Ctrl', function ($scope) {
   $scope.users = [
      { Name: 'John', Selected: false },
      { Name: 'Mary', Selected: false },
      { Name: 'Jane', Selected: false },
      { Name: 'Tom', Selected: false },
      { Name: 'Benny', Selected: false }
   ];
});

HTML

  <body ng-app="app" ng-controller='Ctrl'> 
      <ul>
          <li ng-repeat="user in users | orderBy: ['-Selected','Name']">
            {{user.Name }} <input type="checkbox" ng-model="user.Selected" />
          </li>
      </ul>
 </body>

Demo Plunker

AngularJS指令移动复选框

1 个答案: