kaniosrn-j
11/21/2018 - 9:54 AM

Selected current item based on $index

  <!-- This button only shows when is selected/null -->
	<a ng-if="$ctrl.selectedIndex === $index || $ctrl.selectedIndex === null"
	   data-ng-click="$ctrl.ChooseSolution($index, product)"
	   class="dq_btn dq_mr dq_ml">
		{{product.ButtonText}}
	</a>

  <script>

    this.isSelected = false;
    this.selectedIndex = null;
          
    function ChooseSolution(index: any): void {
			let isSelected = this.isSelected = !this.isSelected; // true/false

			// set all 'isBtnActive' property to false - as default
			this.Model.Solution.forEach(function (value: any) {
				value.isBtnActive = false;
			});

			// set selected 'isBtnActive' property to true
			this.Model.Solution[index].isBtnActive = isSelected;	


      // Option 1: ternary operator 			
      // this.selectedIndex = isSelected ? index : null
			// check if isSelected is set to either true/false
			if (isSelected) {
				// set 'selectedIndex' to the current index selected
				this.selectedIndex = index;
			} else {
				// reset 'selectedIndex' back to null
				this.selectedIndex = null;
			}
		}
    
  </script>