Trigger Angular scope id remotely outside of ng-repeat

Question

I am looking for some help with a little Angular App.
I have a group of items/images that when a plus icon is clicked, all other items are covered and the selected item is not covered.

I want to now trigger this from outside of the ng-repeat.

I am looking for a way to trigger the cover effect when clicking on a text link, as well as the plus icon now used.
Have it use both options.

So far I have the text triggers fire off a id, that can be used in the app code.

Here is a Working FIDDLE.

Here is the original question that Avijit Gupta did for this.
Avijit's post is the excepted answer.

Any help with this is greatly appreciated.

The nav Text trigger code...

<div class="col-xs-12 navText">
    <ul>
       <li><a href data-id='1' data-ng-click="idLocation($event)">ONE</a></li>
       <li><a href data-id='2' data-ng-click="idLocation($event)">TWO</a></li>
       <li><a href data-id='3' data-ng-click="idLocation($event)">THREE</a></li>
       <li><a href data-id='4' data-ng-click="idLocation($event)">FOUR</a></li>
       <li><a href data-id='5' data-ng-click="idLocation($event)">FIVE</a></li>
    </ul>
  </div>

The app code...

    // nav text trigger id's
    $scope.idLocation = function (e) {
        ids = $(e.target).data('id');
        console.log(ids); 
    };

  $scope.setToInitialState = function() {
    $scope.blocks.forEach(function(block) {
      $scope.isSelected[block.id] = false;
      $scope.isCovered[block.id] =  false;
    });
  };

  $scope.selectBlock = function(id) {
    $scope.isSelected[id] = !$scope.isSelected[id];
    $scope.isCovered[id] = false;
    if ($scope.isSelected[id]) {
      $scope.blocks.forEach(function(block) {
        if (block.id !== id) {
          $scope.isCovered[block.id] = true;
          $scope.isSelected[block.id] = false;
        } 
      });
    }
    else {
      $scope.setToInitialState();
    }   
  };   

});

How it works...

score 0 · Answer 1 · answered May 20 '16 at 22:57

I suggest you to use the same ng-repeat in tag li and the same function selectBlock in tag a.

<div class="row">
    <div class="col-xs-12 navText">
        <ul>
           <li ng-repeat="block in blocks"><a href data-ng-click="selectBlock(block.id)">{{block.name}}</a></li>       
        </ul>
    </div>
</div>

Also I add the field name for each element in blocks.

$scope.blocks = [
    {
        id: '1',
        name: 'ONE',
        block: "1",
    }, 
    {
        id: '2',
        name: 'TWO',
        block: "2",
    }, 
    {
        id: '3',
        name: 'THREE',
        block: "3",
    }, 
    {
        id: '4',
        name: 'FOUR',
        block: "4",
    }, 
    {
       id: '5',
       name: 'FIVE',
       block: "5"
    }
];

Hello Dj_System. This did not really answer the question for what I was looking for. But I do appreciate what you suggested. You can see I have answered my own question with an option that works for me. Thanks AngularJR — AngularJR, May 22 '16 at 02:52

AngularJR · Answer 2 · 2016-05-22T23:33:37.427

To Answer my own question.

One way to trigger the cover effect from outside of the ng-repeat.
What I did here was to use the selectBlock() in a data-ng-click and just hard code the ID into the selectBlock().

Like this...

<li><a href data-ng-click="selectBlock('1')">ONE</a></li>
<li><a href data-ng-click="selectBlock('2')">TWO</a></li>
<li><a href data-ng-click="selectBlock('3')">THREE</a></li>
<li><a href data-ng-click="selectBlock('4')">FOUR</a></li>
<li><a href data-ng-click="selectBlock('5')">FIVE</a></li>

Here is the demo of it working by clicking the TEXT and the +/- icon.

Working FIDDLE.

Trigger Angular scope id remotely outside of ng-repeat

2 Answers2