AngularJS指令移動復選框

Question

如果我有兩個或多個復選框，如何將未選中的復選框移到已選中的復選框下方。 目前，我在下面有簡單的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>

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>

演示柱塞

AngularJS指令移動復選框

問題描述

1 個解決方案

解決方案1
0 2014-07-22 09:47:46

AngularJS指令移動復選框

問題描述

1 個解決方案

解決方案1 0 2014-07-22 09:47:46

解決方案1
0 2014-07-22 09:47:46