在ng-repeat之外远程触发Angular作用域ID。

14 浏览
0 Comments

在ng-repeat之外远程触发Angular作用域ID。

我正在寻找一些关于一个小型Angular应用程序的帮助。当点击加号图标时，我有一组项目/图片，其他所有项目都会被覆盖，选择的项目不会被覆盖。我现在想从ng-repeat之外触发这个效果。我希望能够通过点击文本链接来触发这个覆盖效果，而不仅仅是使用加号图标。希望能同时使用这两种选项。到目前为止，我已经让文本触发器触发了一个可以在应用程序代码中使用的id。这是一个可工作的FIDDLE链接。这是Avijit Gupta为此问题提出的原始问题。Avijit的帖子是被接受的答案。非常感谢任何对此的帮助。

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

应用程序代码...

// 导航文本触发器id
$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();
  }   
};   
});

它是如何工作的...

enter image description here

0

2 答案

0 Comments

Angular中的$scope是用来存储数据和方法的对象。在这个问题中，作者想要在ng-repeat之外触发Angular范围的ID。作者通过在data-ng-click中使用selectBlock()并硬编码ID来实现这一目标。通过点击文本和+/-图标，可以看到效果。

解决方法是在HTML代码中添加以下内容：

  • ONE
    • 

  • TWO
    • 

  • THREE
    • 

  • FOUR
    • 

  • FIVE
    •

    还有一个演示链接，通过点击文本和+/-图标可以查看效果。演示链接为：[FIDDLE](https://jsfiddle.net/AngularJR/yLyrweaw/3/)

    同时，还有一个动态图像来展示效果。动态图像如下所示：

    ![enter image description here](https://i.stack.imgur.com/RQtY6.gif)

    0
    0 Comments

    问题的出现原因：

    这个问题的出现是因为在ng-repeat中触发了Angular作用域范围（scope id），但是需要在ng-repeat外部远程触发。

    解决方法：

    可以在ng-repeat标签的li元素和a元素中使用相同的ng-repeat指令，并在a元素的ng-click属性中使用相同的selectBlock函数。

    下面是解决方法的代码示例：

    还需要为blocks数组中的每个元素添加name字段：

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

    以上就是解决这个问题的方法。

    0