Question

我正在寻找一些Angular App的帮助我有一组项目/图像，当点击加号图标时，所有其他项目都被覆盖，所选项目不被覆盖。

我想现在从ng-repeat外面触发它。

我正在寻找一种方法来触发封面效果点击文字链接，以及现在使用的加号图标。
让它使用这两个选项。

到目前为止，我已经将文本触发器触发了一个id，可以在app代码中使用。

这是一个工作FIDDLE。

这是Avijit Gupta为此所做的original question Avijit的帖子是例外答案。

非常感谢任何帮助。

导航文字触发器代码...

<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>

应用代码......

    // 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();
    }   
  };   

});

工作原理......

Answer 1

我建议你在标签li中使用相同的ng-repeat，在标签a中使用相同的函数selectBlock。

<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>

另外，我在块中为每个元素添加字段名称。

$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"
    }
];

Answer 2

回答我自己的问题。

从ng-repeat外部触发覆盖效果的一种方法我在这里做的是在数据点击中使用 selectBlock（），只需将 ID 硬编码到 selectBlock（）中。

喜欢这个......

<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>

以下是单击TEXT和+/-图标的演示。

工作FIDDLE。

在ng-repeat之外远程触发Angular范围id

2 个答案: