我可以使用ng-repeat并使用角度分量隔离范围吗？

所以我有一个ng重复块，将对象传递给角度组件。看起来像这样我可以使用ng-repeat并使用角度分量隔离范围吗？

<div ng-repeat="assessor in $ctrl.dedupeDetail.matches"> 
    <assessordedupequickcard assessor="assessor"></assessordedupequickcard> 
</div>

编辑：

我想这可能是有益的补充什么成分被定义为。下面是代码

angular.module('assessor.dedupe') 
    .component('assessordedupequickcard', { 
     controller: 'assessorDedupeQuickcardController', 
     templateUrl: 'src/app/assessor/dedupe/quickcard/assessor.dedupe.quickcard.html', 
     bindings: { 
      assessor: '<', 
     } 
    });

末编辑

的quickcard需要各个领域的评审员对象，如姓名，地址，电话号码，年龄等，并在一个小盒子干净显示它们这应该代表该人的联系人卡片。

在这种quickcard有两个标签

<label ng-if="$ctrl.isSource" class="quickcard-list-header pull-right">FROM</label> 
<label ng-if="$ctrl.isTarget" class="quickcard-list-header pull-right">TO</label>

在这些列表中，“联系卡”，显示有一个功能，您可以选择一个卡，然后再选择另一个，和传输信息从一个到另一个。

当从NG-重复一览我需要翻转在其控制器< assessordedupequickcard>组件的范围内存在的标志和翻转isSource =真选择第一

<assessordedupequickcard assessor="assessor"></assessordedupequickcard>

。

以及选择所述第二

<assessordedupequickcard assessor="assessor"></assessordedupequickcard>

从NG-重复列表中，当再次移动一个层更深的自定义组件的控制器和翻转其isTarget =真。

但我不知道如何隔离哪个组件将有一个标志翻转。因为它们不是单独命名的，它们都被视为一个整体。我对其中一个重复的自定义组件进行的任何更改都会发生在所有自定义组件上。

我不确定我是否已经解释清楚，如果有任何更多的信息可以提供，请让我知道。在此先感谢任何人可以提供给我的帮助。

来源

2017-03-15 Chris

所以总结......你单击两个NG重复的项目之一。当点击时，被点击的组件的某些属性被改变（标记）..你想知道哪两个从父控制器改变了...我的理解是否正确？ –

@PrashantGhimire正确。当点击其中一个重复项目（其中可能少至2个或多达15-20个）时，我需要更改组件的控制器内部点击的特定属性，而其他组件和它们的组件控制器的属性保持不变。 – Chris

有你..会做一个演示... –

角度部件总是具有隔离范围（components documentation）。现在，您只需要实现双向绑定并传递数据对象。这使得控制器（包含重复的组件）能够清楚地了解每个组件内发生的任何数据更改。

页HTML：

<div ng-controller="SampleCtrl"> 
    <h3>Repeated Components with Isolated Scope: </h3> 
    <box ng-repeat="data in collection track by $index" data="data"></box> 

    <h3>Parent Controller:</h3> 
    <pre>{{collection| json}}</pre> 
</div>

页面JS：

.controller('SampleCtrl', function($scope) { 
    $scope.collection = [{ 
    name: 'A' 
    }, { 
    name: 'B' 
    }, { 
    name: 'C' 
    }, { 
    name: 'D' 
    }, { 
    name: 'E' 
    }]; 

})

组件JS：

.component('box', { 
    bindings: { 
     data: '=?' 
    }, 
    templateUrl: 'box.html', 
    controllerAs: 'vm', 
    controller: function() { 
     var vm = this; 
     vm.toggle = function() { 
     vm.data.flagged = !vm.data.flagged; 
     } 
    } 
    });

组件的HTML：

<div class="box" ng-click="vm.toggle()"> 
    <p>{{vm.data}}</p> 
</div>

Plunker Demo

来源

2017-03-15 21:39:08

我可以使用ng-repeat并使用角度分量隔离范围吗？

回答

相关问题