ng-repeat節の1つの要素に対してアクションを設定します。

Question

このコードはありますが、IonicとAngularJSで少し問題があります。

$scope.changeArrow = function(){ 
    if($scope.down == false){ 
     $scope.down = true; 
    }else{ 
     $scope.down = false; 
    } 
}; 

<ion-item ng-repeat="beac in disp" class="item-icon-right" ng-click="changeArrow()"> 
    <b>{{choosen.network}} - {{beac.minor}}</b> •&nbsp;&nbsp;{{beac.viewed}}/{{beac.conf}} 
    <i class="icon ion-arrow-right-b" ng-show="down"></i> 
    <i class="icon ion-arrow-down-b" ng-show="!down"></i> 

結果：クリックした後

- >>]をクリックした後

は、最初の画像になります。

問題は、選択したアイテムだけでなく、すべてを変更する必要があるということです。 Ionicでどうすればいいのか分かりません。任意の「特別な」方法？

ありがとうございました

Answer 1

<ion-item ng-repeat="beac in disp" class="item-icon-right" ng-click="selectedItem=beak"> 
    <b>{{choosen.network}} - {{beac.minor}}</b> •&nbsp;&nbsp;{{beac.viewed}}/{{beac.conf}} 
    <i class="icon ion-arrow-right-b" ng-show="selectedItem!=beak"></i> 
    <i class="icon ion-arrow-down-b" ng-show="selectedItem==beak"></i> 

、あるいはこのような：

<ion-item ng-repeat="beac in disp" class="item-icon-right" ng-click="selectedItem=beak"> 
    <b>{{choosen.network}} - {{beac.minor}}</b> •&nbsp;&nbsp;{{beac.viewed}}/{{beac.conf}} 
    <i class="icon" ng-class="{'ion-arrow-down-b': beak==selectedItem, 'ion-arrow-right-b': beak!=selectedItem}"></i> 

Answer 2

希望します。

$scope.changeArrow = function(index){ 
    $scope.down = index; 
}; 

、その後ng-click="changeArrow($index)"

、その後ng-show="down === $index"

Answer 3

あなたchangeArrow機能は、おそらく順番にすべての項目の矢印を変更down変数をトグルしています。アイテムのインデックスをこの関数に渡すと、どの矢印が下になるかを制御できます。

コントローラ

$scope.selectedItemIndex = -1; 

$scope.changeArrow(index) { 
    $scope.selectedItemIndex = index; 
} 

テンプレート

<ion-item ng-repeat="beac in disp" class="item-icon-right" ng-click="changeArrow($index)"> 
    <b>{{choosen.network}} - {{beac.minor}}</b> •&nbsp;&nbsp;{{beac.viewed}}/{{beac.conf}} 
    <i class="icon ion-arrow-right-b" ng-show="$index === selectedItemIndex"></i> 
    <i class="icon ion-arrow-down-b" ng-show="$index !== selectedItemIndex"></i>