我可以使用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並使用角度分量隔離範圍嗎？

回答

相關問題