bugfix> angularjs > 投稿

9つのdivをループするng-repeatがあり、それぞれが異なる色を持っています。

ユーザーが1つのdivをクリックすると、その色がセクションの背景色になります。

私はこれをやろうとしています:

繰り返される配列は次のように構成されます。

interface colorBoxes {
    color: string;
    isSelected: boolean;
  }

ビュー内:

 <div ng-repeat="s in vm.colorBoxes track by $index">
        <div class="pointer" ng-click="w.backgroundColor = s.color; vm.pickColor(s, $index)" ng-style='{"background-color": s.color}'>
            <i ng-show="vm.isColorSelected($index) === true" class="fa fa-check fa-1x checkOnSelectedLegend"></i>
        </div>
    </div>

コントローラー内:

pickColor(array: any, index: number) {
      for(var i = 0; i<=this.colorBoxes.length; i++) {
        this.colorBoxes[i].isSelected = false;
      }
      array[index].isSelected = true;
    } 

この関数を使用するので、DIVをクリックすると、変数: isSelected trueになり、他のすべてのDIVはfalseに設定されます。

ng-showを使用してビューでこの変数を使用し、現在選択されているDIVにチェックマークを表示しますが、ng-showに入れた関数の下では機能しません

isColorSelected(index:number):boolean {
      return this.colorBoxes[index].isSelected
    }

私は何を間違えていますか?

要約すると、ボックスをクリックすると、その色の文字列が別の要素に適用され(コードで正しく機能している)、そのボックスにチェックマークを表示する必要があるため、 isSelected を設定することにより、上記の機能クリックするとvarがtrueになりますが、機能しません。

問題は、ng-showの角度が変更をチェックしていないことであると確信しています。変更をチェックする方法を正確に知らないだけで、おそらく私が持っているものを取得するよりクリーンな方法がありますやろうとしている!

ありがとうございました

追加されたフィドル:http://jsfiddle.net/7zymp2gq/1/

回答 2 件
  • OK、ここでコードを修正して動作させます:

    http://jsfiddle.net/7zymp2gq/4/

    基本的に、関数 $scope.pickColor には2つの問題がありました。 :

    ループが存在しないフィールドに入っていたため、 <= を変更しました  と <

    array[index] を更新していました 、それは $scope.colorBoxes[index] を更新する必要があります

  • ng-show で関数を使用する代わりに   isSelected を使用できます  プロパティ:

    <div ng-app="app" ng-controller="Ctrl">
      <div class="class1" ng-repeat="s in colorBoxes track by $index">
        <div class="pointer class2" ng-click="pickColor(colorBoxes,$index);" ng-init="lastselected=s.isSelected?$index:null" ng-style='{"background-color": s.color}'>
          <i ng-if="s.isSelected" class="fa fa-check fa-1x checkOnSelectedLegend"></i>
        </div>
      </div>
      <div class="changeColor" ng-style='{"background-color": chosenColor}'></div>     
    </div>
    
    

    このデモを確認してください。

あなたの答え