-1

アイテムのリストがあり、ユーザーがそれらの1つをクリックすると、そのメニューアイテムの詳細(アイテムのクラスまたはアイテムのテキスト自体-つまり$market変数)が詳細( $marketvar)を使用してサーバーリクエストを作成し、入力しますサーバーから返された値を含む以下の div (送信された詳細によって異なります)。

ここに私のコードがどのように見えるかがあります

    <div ng-controller="MarketCtrl">

        Please select a market:

        <?php foreach ($markets as $market): ?>
            <span class="<?= strtolower(str_replace(' ', '_', $market)) ?>"><?= $market ?></span>
        <?php endforeach; ?>

        You have selected _______ as the market.

        <div>
            <!-- Load items based on the item selected above -->
        </div>

    </div>

私はこれをすべて AngularJS で行いたいと思っています。私はすでに jQuery に慣れていますが、本当に AngularJS を使用してこれをやりたいと思っています。

これにはどうすればよいですか？新しいディレクティブを作成してから、上記の要素をディレクティブなどにバインドする必要がありますか? 私は今、AngularJS について少し迷っています。egghead.io のビデオを見ていますが、このようなものはまだ見たことがありません。

ありがとう。

4

1 に答える 1

1

これは少しオープンエンドであり、さまざまな方法で取り組むことができます。市場と対応する詳細のリストが最小限の場合、最初の json リクエストですべてを取得し、モデルを次のようにします。

 var markets = [{"name":"market1", "detail": {"description":"blah blah"} }]

html:

<div ng-controller="MarketCtrl">
    Please select a market:
        <span ng-repeat="market in markets" ng-click="setMarket(market)" ng-class="getClass(market.name)">{{market.name}}</span>

         You have selected {{curMarket.name}}as the market.
    <div>
         {{curMarket.detail.description}}
    </div>
</div>

コントローラ：

MarketCtrl= function($scope){
    $scope.curMarket={};
    $scope.getClass = function(name){
        return name.replace(" ", "_")
    }

    $scope.setMarket(market){
         $scope.curMarket=market;
    }

}

データを呼び出したい場合は、多すぎる原因になります:

var markets = [{"name":"market1", "id":1 }, {"name":"market2", "id":2}]

html:

<div ng-controller="MarketCtrl">
    Please select a market:
        <span ng-repeat="market in markets" ng-click="getMarket(market)" ng-class="getClass(market.name)">{{market.name}}</span>

         You have selected {{curMarket.name}}as the market.
    <div>
         {{curMarket.detail.description}}
    </div>
</div>

コントローラ：

MarketCtrl= function($scope, $http){
    $scope.curMarket={};
    $scope.getClass = function(name){
        return name.replace(" ", "_")
    }

    $scope.getMarket(market){
         var url='';
         $http.get(url).success(function(data){
                $scope.curMarket=data;
         });
    }

}
于 2013-09-12T15:43:36.163 に答える