2017-01-24 6 views
1

私はui-sortableを使って2つのオブジェクトの配列をドラッグ&ドロップしています。ドラッグして名前欄でオブジェクトをソートする必要があります。ここでorderBy ug-repeat with ni-sortableのフィールド

は、HTMLファイル内の私のコードです:

コントローラで
<body ng-controller="listCtrl"> 
    <ul ui-sortable="playerConfig" ng-model="players"> 
    <li ng-repeat="player in players"> 
     <!--| orderBy: ['name']--> 
     {{player.name}} 
    </li> 
    </ul> 
</body> 

<style type="text/css"> 
    .beingDragged { 
    height: 24px; 
    margin-bottom: .5em !important; 
    border: 2px dotted #ccc !important; 
    background: none !important; 
} 
</style> 

angular.module('app', [ 
    'ui.sortable' 
]). 

controller('listCtrl', function ($scope) { 

    var baseConfig = { 
     placeholder: "beingDragged" 
    }; 

    $scope.playerConfig = angular.extend({}, baseConfig, { 
     connectWith: ".players" 
    }); 

    $scope.players = [ 
     { 
     "name" : "John", 
     "id" : "123", 
     "score": "456" 
     }, 
     { 
     "name" : "Tom", 
     "id" : "234", 
     "score": "678" 
     }, 
     { 
     "name" : "David", 
     "id" : "987", 
     "score": "5867" 
     } 
    ]; 

私は、しかし、Plunkerをいくつかの検索を行なったし、同様の問題が https://github.com/angular-ui/ui-sortable/issues/70としてのGitHubで報告ことがわかりましたソースコードを見つけることができなかったorderByFilterを使用しています。誰かが似たような問題を抱えていて、これを解決する方法を教えてもらえないのかどうかわからないありがとう。

答えて

0

orderByFilterはAngularJSの一部ですので、すでにアクセスできます。あなたが見つかった例では、あなたのコントローラに注入し、それを使用することができます同じように

は:ちょうど

app.controller('MyController', function ($scope, $filter) { 

    $scope.players = [{ name: 'Eve'}, { name: 'Adam'}]; 

    var orderByFilter = $filter('orderBy'); 
    $scope.sorted = orderByFilter($scope.players, 'name'); 
}); 

または::

$scope.sorted = $filter('orderBy')($scope.players, 'name'); 

app.controller('MyController', function ($scope, orderByFilter) { 

    $scope.players = [{ name: 'Eve'}, { name: 'Adam'}]; 

    $scope.sorted = orderByFilter($scope.players, 'name'); 
}); 

これは同等です

$filterの代わりにorderByFilterを直接注入するのは単なるショートカットです。

+0

偉大な、私はそれを試して、それは完璧に動作します。私はAngularJSには新しいので、あなたの助けに感謝します。 – YHC

+0

@YHCあなたは大歓迎です:) – tasseKATT

関連する問題