AngularJS：価格ラベルをクリックして価格を並べ替える場合にのみ、「^」の矢印を表示するには

「価格」ラベルをクリックしてスパンタグを表示し、アイテムの最低価格から最高価格ここAngularJS：価格ラベルをクリックして価格を並べ替える場合にのみ、「^」の矢印を表示するには

<th id="tbl-labels" ng-click="orderByMe('price')">Price<span id="small">lowest price</span></th>

フルコントローラーコード

<body ng-app="app" ng-controller="MainController"> 
    <div id="outPopUp"> 
    <svg></svg> 
    </div> 
    <p id="search-txt">Search an item</p> 
    <input id="rounded" text" ng-model="searchfor" /> 
    <div id="container"> 
    <table border="0" width="100%"> 
     <tr> 
      <th id="tbl-labels" ng-click="orderByMe('product')">Product</th> 
      <th id="tbl-labels" ng-click="orderByMe('price')">Price<span id="small">lowest price</span></th> 
      <th id="tbl-labels">Link</th> 
     </tr> 
     <tr id="tr-items" ng-repeat="deal in deals | filter:searchfor | orderBy:myOrderBy"> 
      <td id="product">{{deal.product}}</td> 
      <td id="price">${{deal.price}}</td> 
      <td id="url">{{deal.link}}</td> 
     </tr> 
    </div> 
    </body>

出典

2017-01-04 thatNigerianGuy

モデルに 'isOrdered'のようなフラグを設定し、それが真であるかどうかを表示することができます。 –

はあなたのスパンID =「小さな」はNG-ショーやNG-非表示を持っている必要がありますされ、orderByMeが実行されたときの式を更新する必要があります。あなたの範囲内

<th id="tbl-labels" ng-click="orderByMe('price')">Price<span ng-show="isLowestToHigher" id="small">lowest price</span></th>

は、私はあなたがより多くのあなたが達成しようとしているものを表すものに「小さな」のidの名前を変更し、すべてのIDの

function orderByMe(property) { 
... 
... 
    if(property === 'price') { 
    scope.isLowestToHigher = !scope.isLowestToHigher 
    } 
}

出典

2017-01-04 17:15:01 sexta13

ファーストのようなものを持っていると思います。「フィルタバイプライス」のようなもの。あなたのorderByMe機能で次に

：あなたはまた、フィルタリングを切り替えるには、あなたの機能を変更することができますし、あなただけの別のものを追加したい

#filter-by-price .lowtohigh::after { 
    content: " ^"; 
}

：

function orderByMe(property) { 
... 
... 
    if(property === 'price') { 
    $("filter-by-price").addClass("lowtohigh"); 
    } 
}

次に、あなたのCSSにあなたのような何かをするだろうそれを処理するクラス。

#filter-by-price .hightolow::after { 
    content: " ˅"; 
}

出典

2017-01-04 17:23:30 Puzzle84

変数$ scope.clickedValue = falseを宣言します。価格がクリックされたらtrueにしてから、ng-showディレクティブを使用します。

<th id="tbl-labels" ng-click="orderByMe('price')">Price<span ng-show="clickedPrice" id="small">lowest price</span></th>

希望します。

出典

2017-01-04 17:25:09

' $ scope.clickedPrice = false; $ scope.orderByMe = function（q）{ this.myOrderBy = q; if（$ scope.myOrderBy = 'price'）{ this.clickedPrice = true; } else { $ scope.clickedPrice = false; } }; ' – thatNigerianGuy

AngularJS：価格ラベルをクリックして価格を並べ替える場合にのみ、「^」の矢印を表示するには

答えて

関連する問題