0

単純な JavaScript で表現される DOM 要素に変更が加えられたときに、Angular JS がそのモデルを更新するように何時間も試みてきました。Angular JS コードを正しく記述していないだけなのか、それとも問題に正しく取り組んでいないのか、よくわかりません。

各項目の並べ替え値を保持する入力ボックスを備えた並べ替え可能なリストがあります。リストを再ソートするソート順を手動で設定するか、項目をドラッグ アンド ドロップします (JQuery ソート可能を使用)。ドラッグ アンド ドロップでアイテムを並べ替えると、sortable の update コールバック関数で入力値が更新されますが、その入力にバインドされた Angular JS オブジェクトが更新されないようです。

$scope.$apply で入力値を操作する JS をラップしようとしましたが、役に立ちませんでした。

ここにフィドルがあります： http://jsfiddle.net/smelly_fish/d9kt9/1/

ここに私のJSがあります：

var sortedShippingMethods = [{
    "id": "UPS 2nd Day Air A.M. ®",
    "name": "UPS 2nd Day Air A.M. ",
    "sort": "0"},
{
    "id": "UPS 3 Day Select ®",
    "name": "UPS 3 Day Select ",
    "sort": "0"},
{
    "id": "UPS Ground",
    "name": "UPS Ground",
    "sort": "2"}];

jQuery(document).ready(function(){

    // Sortable list
    $('#shipping-sort-list').sortable({
        items: 'li',
        axis: 'y',
        containment: 'parent',
        cursor: 'move',
        update: function(event, ui) {
            $scope = angular.element($('#shipping-sort-list')[0]).scope(); 
            $scope.$apply(function(){
                $('#shipping-sort-list input').each(function(i){
                    $(this).attr('value', i+1);
                });
            });
        }
    });
});

function AdminShippingSettingsCtrl($scope) {
    $scope.sortedShippingMethods = sortedShippingMethods;

    $scope.getSortValue = function(sortedShippingMethod) {
        //have to typecast to an int or 3 will show up higher than 23 (string sort ftl)
        var sort = parseInt(sortedShippingMethod.sort, 10);
        return sort;
    }
}​

ここに私のマークアップがあります:

<div id="shipping-sort-list" data-ng-app data-ng-controller="AdminShippingSettingsCtrl">
    <ul>
        <li data-ng-repeat="sortedShippingMethod in sortedShippingMethods | orderBy:[getSortValue, 'name']"><input data-ng-model="sortedShippingMethod.sort" type="text" name="sortOrder[{{sortedShippingMethod.id}}]" value="{{sortedShippingMethod.sort}}" /> {{sortedShippingMethod.name}}</li>
</ul>

<p data-ng-repeat="sortedShippingMethod in sortedShippingMethods">Name: {{sortedShippingMethod.name}} Sort Value: {{sortedShippingMethod.sort}}</p>
</div>
​
4

1 に答える 1

1

答えだけが必要な場合は、http: //jsfiddle.net/d9kt9/4/にアクセスしてください。

説明については、読み進めてください。現在の繰り返しの問題は、要素の値を更新していることですが、実際には各 shippingMethod のオブジェクトのスコープを更新する必要があります。値は、前後に渡される単なる値 (私が知っている奇妙な) ですが、(私が行ったように) オブジェクトを更新すると、参照渡しになります。これにより、メインの sortedShippingMethods に影響を与えることができます。したがって、それらをループすることは正しいことですが、次のようにそれぞれのスコープを取得した方法を確認できます。

$('#shipping-sort-list input').each(function(i){
    var inputScope = angular.element(this).scope();
    inputScope.sortedShippingMethod.sort = i+1;
});

次に、2 番目のリストの data-ng-repeat に、最初のリストと同じ orderBy を追加しました。

<p data-ng-repeat="sortedShippingMethod in sortedShippingMethods | orderBy:[getSortValue, 'name']">
于 2012-12-07T19:31:51.210 に答える