2

価格と評価に基づいて並べ替えようとしています (返されたオブジェクト内)。選択メニューを使用するよりも、ng-click を実行したいと思います。これが可能な方法はありますか？いろいろ探しましたが、これが一番近いです。

    <ul class="restaurant-filter">
        <li> <i class="icon-search"></i>Organize results by "Price" &amp; "Rating"&hellip;
            <ul ng-model="priceAndRating">
                <li ng-click="price">Price</li>
                <li ng-click="rating">Rating</li>
            </ul>
        </li>
    </ul>

    <ul class="available-restaurants">
        <li ng-repeat="restaurant in availableRestaurants | orderBy:priceAndRating" ng-click="addRestaurantToEvent(restaurant.restaurantName)">
            <h6>{{restaurant.restaurantName}}</h6>
            <p>label one two three for five six</p>

            <i class="icon-chevron-right"></i>                    
        </li>
    </ul>

availableRestaurants は私のオブジェクトです。

4

2 に答える 2

11

データの構造やコントローラーを提供してくれなかったので、あなたが望むことを行う単純なものを作成しました。これがフィドルです。

注:ng-click関数を呼び出すか、何らかのコードを実行する必要があります。関数リテラルを記述してプロパティを設定することもできますが、これはコントローラ ロジックをビューに混在させています (並べ替えを後で変更する必要がある場合に何が起こるかを考えてみてください。ビューでそのロジックを更新する必要があり、これは悪いことです)。

これを処理するために、プロパティを取るだけのソート関数を追加しました。これは必要に応じて設定できます。

HTML:

<div ng-app="miniapp">
    <div ng-controller="Ctrl1">
        <ul class="restaurant-filter">
        <li> <i class="icon-search"></i>Organize results by "Price" &amp; "Rating"&hellip;
            <ul>
                <li ng-repeat="option in sortOptions" ng-click="setSort (option)">{{option}}</li>
            </ul>
        </li>
    </ul>

    <ul class="available-restaurants">
        <li ng-repeat="r in availableRestaurants | orderBy:sort">
            <span>{{r.name}} - {{r.rating}}</span>                  
        </li>
    </ul>
    </div>
</div>​

JS:

function Ctrl1($scope) {
    $scope.sortOptions = ["Price", "Rating"];
    $scope.sort = "Price";
    $scope.setSort = function(type) { $scope.sort = type.toLowerCase(); };
    $scope.availableRestaurants = [{name: "Chevy's", rating: 6, price: 6},
                                  {name: "Burger King", rating: 2, price: 1},
                                  {name: "Red Robin", rating: 4, price: 4},
                                  {name: "Carl's Jr", rating: 5, price: 2}];
}

</p>

于 2012-12-04T21:34:11.267 に答える
2

コードをコピーしてフィドルに貼り付けました：

http://jsfiddle.net/blesh/tSHUf/

Tyrsius が主張したように関数を呼び出す必要はありませんが、何らかのコードを実行する必要があります。私のフィドルでわかるように、名前付きのスコープorder = 'price'または'rating'クリックしたものに応じてプロパティを設定しています。

次にorderBy:order、クリックによって設定された $scope.order にあるものを $eval します。

それが役立つことを願っています。

于 2012-12-04T21:42:16.617 に答える