Javascript AngularJS指令移动复选框_Javascript_Angularjs_Checkbox_Angularjs Directive

Javascript AngularJS指令移动复选框

javascript angularjs checkbox

Javascript AngularJS指令移动复选框,javascript,angularjs,checkbox,angularjs-directive,Javascript,Angularjs,Checkbox,Angularjs Directive,如果我有两个或多个复选框，我将如何将未选中的复选框移到已选中复选框的下方。现在我在下面有一个简单的HTML，所以如果选中复选框2，它应该移动到顶部，复选框1应该向下移动我想到的两种方法是：在作用域上创建和排列，并使用ng repeat填充复选框，然后根据天气情况应用过滤器，或者选中复选框或拼接阵列。唯一的问题是我真的不想在范围上定义我的复选框创建一个指令以某种方式操作dom元素如果有人有类似的问题，你会推荐什么是最好的解决方案 <div class="col-md-6">

如果我有两个或多个复选框，我将如何将未选中的复选框移到已选中复选框的下方。现在我在下面有一个简单的HTML，所以如果选中复选框2，它应该移动到顶部，复选框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>


请勾选一个或多个方框
复选框1
复选框2
一些错误信息！

尝试使用过滤器：

HTML




{{user.Name}

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

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