0
ショッピングカートに広告申込情報を表示するためのモーダルがあります。このショッピングカートモーダルでは、数量入力ボックスを含む各明細を別々の行に表示します。新しい商品がショッピングカートに追加されるたびに、モーダル が開き、最近追加された商品が一番上に表示されます。最後に追加したアイテムの数量入力ボックスにフォーカスを表示させたい。ショッピングカートの商品にangularjsを設定する
anglejsにカスタムディレクティブを作成し、入力ボックスに 'focus-me'ディレクティブを追加することで、特定のアイテムにフォーカスを設定する方法の良い例が見つかりました。私が抱えている問題は、最初の項目がカートに追加されたことに焦点を当てて、 に滞在していることです。
<div id="shoppingCart" ng-show="cartItems.length > 0" ng-repeat="scItem in cartItems track by $index ">
<div id="shoppingCartItems">
<fieldset >
<div class="shoppingCartItem">
<div id="scCol1">
<div class="lineItemDetail">
<strong>Item #{{ scItem.lineId }}</strong>
</div>
<img src="{{ scItem.imageUrl }}">
</div>
<div id="scCol2">
<div class="lineItemDetail">
<strong>Qty:</strong>
<span>
<!-- Put the focus on the qty box if the item was just added to cart -->
<input type="text"
name="qty_{{$index}}"
maxlength="7"
size="4"
focus-me="true"
ng-keypress="shoppingCartKeyCheck($event)"
ng-model="scItem.qty"
ng-blur="validateQty(scItem.lineId)"/>
</span>
<span id="invalidQuantity" ng-show="scItem.validationMessage" ng-bind-html="$sce.trustAsHtml(scItem.validationMessage)"></span>
</div>
<div class="lineItemLink">
<a href="" ng-click="removeSelectedProduct(scItem.lineId)" class="removeShoppingCartItemLink">Remove From Cart</a>
</div>
</div>
<br/>
</div>
</fieldset>
</div>
</div>
はここに私のカスタムディレクティブです：ここに私のhtmlです
app.directive('focusMe', function($timeout) {
return {
scope: { trigger: '@focusMe' },
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if(value === "true") {
console.log("its true");
$timeout(function() {
element[0].focus();
});
}
});
}
};
});
私は、これはフォーカスが最初のショッピングカートの項目が追加されたときに設定され、そのされていないという事実とは何かを持っていると思われます後続の項目が追加されたときに削除/リセットされます。私はここで何をする必要があるかについてちょっと固まっています。
ご協力いただきましてありがとうございます。