AngularJS - Как правильно использовать ng-show внутри ng-repeat?Мой логический не обновляется

Question

У меня есть ng-repeat, который зацикливается на 9 делений, каждый из которых имеет свой цвет.

Когда пользователь нажимает на одно деление, его цвет становится цветом фона раздела.

Я пытаюсь сделать это:

Массив, который повторяется, имеет следующую структуру:

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 становится истинной, а все остальные DIV имеют свои значения, равные false.

Я использую эту переменную в представлении с ng-show, чтобы показать галочку на DIV, который выбран в данный момент, но это не работает, ниже функции, которую я вставил в это ng-show

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

Что я делаю не так?

Подводя итог, я хочу, чтобы при нажатии на поле его цветовая строка применялась к другому элементу (который корректно работает с моим кодом), а затем к этому полюНадо поставить галочку в верхней части экрана, я попытался с помощью вышеуказанных функций, установив isSelected var to true при нажатии, но это не работает.

Я почти уверен, что проблема в том, что angular не проверяет изменения в этом ng-шоу, я просто не знаю точно, каксделайте так, чтобы он проверял изменения, и, возможно, есть более чистый способ получить то, что я пытаюсь сделать!

Спасибо

добавленная скрипка: http://jsfiddle.net/7zymp2gq/1/

Answer 1

Вместо использования функции на 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>

Проверьте эту демонстрацию .

Answer 2

Хорошо, здесь у вас исправлен и работает ваш код:

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

В принципе было две проблемы с функцией $scope.pickColor:

1. Цикл входил в несуществующие поля, я изменил <= на <
2. Он обновлял array[index], и он должен обновлять $scope.colorBoxes[index]