كيف يمكنني منع الجداول المتداخلة داخل ng-repeat من الانتشار في كل صف؟

Question

حسنًا، أريد إنشاء تسلسل هرمي ديناميكي متداخل للجداول.لا أحصل على أي مشكلة في البيانات، ولكن استخدام ng-repeat في كل مستوى يتسبب في قيام الجدول الأصلي بإدراج بيانات فرعية لصف معين في كل صف من الجدول الأصل.أريد منع ذلك، لقد حاولت استخدام ng-repeat-start وng-repeat-end، ومع ذلك، بسبب تداخل الجدول، لا يمكنني إضافة علامة النهاية في مكان مناسب لإيقاف التكرار.

تحديثاسمحوا لي أن أوضح قليلاً هنا، لدي 3 جداول متداخلة، وجدول المستوى الأعلى يحتوي على قائمة بالمجموعات، والجدول الفرعي الأول عبارة عن قائمة بجميع العناصر التي تنتمي إلى مجموعة معينة في الجدول الأصلي.عندما ينقر المستخدم على زر التوسيع، أقوم بملء الجدول الفرعي بناءً على الصف الذي تم النقر عليه في الجدول الأصلي، وهذا أمر جيد، ومع ذلك يظهر الجدول الفرعي الآن في كل صف من صفوف الجدول الأصلي بدلاً من الصف الذي تم النقر عليه فقط .

رابط الغطاس http://plnkr.co/edit/RVOnf9wBF3TzXauzvMfF

لغة البرمجة:

<table id="sicGroupTable" class="RadGrid_Metro">
   <thead>
       <tr>
          <td>Sic Code Group</td>
       </tr>
   </thead>
       <tbody ng-repeat="group in sicCodeGroup">
           <tr class="rgRow">
               <td class="rgExpandCol"><img class="rgExpand" ng-click="expandRow(group.GroupId)" ng-model="hideTwoDigitSub" /></td>
               <td><input type="checkbox" ng-model="SelectGroup" /></td>
               <td>{{group.GroupName}}</td>
           </tr>
           <tr ng-hide="hideTwoDigitSub">
               <td></td>
               <td>
                   <table id="sic2DigitTable" class="RadGrid_Metro">
                       <thead>
                           <tr>
                               <th>2 digit sic Code</th>
                           </tr>
                       </thead>
                           <tbody>
                               <tr ng-repeat="twoDigitSic in twoDigitSicCodes" class="rgRow">
                                   <td class="rgExpandCol"><img class="rgExpand" ng-click="expandRow(twoDigitSic.SicCode)" /></td>
                                   <td><input type="checkbox" ng-model="Select2DigitSicCode" /></td>
                                   <td>{{twoDigitSic.SICCode2}} - {{twoDigitSic.Title}}</td>
                                </tr>
                                <tr>
                                <td></td>
                                 <td>
                                     <table id="sic4DigitTable" class="RadGrid_Metro">
                                         <thead>
                                             <tr>
                                                 <th>4 digit sic code</th>
                                             </tr>
                                         </thead>
                                             <tbody>
                                                 <tr class="rgRow">
                                                     <td class="rgExpandCol"><img class="rgExpand" ng-click="expandRow(sicCode.SicCode)" /></td>
                                                     <td><input type="checkbox" ng-model="Select2DigitSicCode" /></td>
                                                     <td>{{sicCode.SicCode}} - {{sicCode.Title}}</td>
                                                 </tr>
                                                 <tr>
                                                     <td></td>
                                                 </tr>
                                              </tbody>
                                          </table>
                                      </td>
                                  </tr>
                              </tbody>
                          </table>
                      </td>
                  </tr>
              </tbody>
          </table>

جافا سكريبت:

var app = angular.module("apptSetting", ['ngResource'])

app.factory('dataFactory',
    function ($resource) {
        return {
            getSicGroups: $resource('../Packages/GetJsonSicCodeGroups'),
            expandRow: $resource('../Packages/GetExpandedRowData')
        }
    });

app.controller('aPackageController', ['$scope', 'dataFactory', function ($scope,  dataFactory) {
function init() {
    $scope.hideTwoDigitSub = true;
    $scope.hideFourdigitsub = true;
}
$scope.sicCodeGroup = dataFactory.getSicGroups.query({}, isArray = true);
$scope.twoDigitSicCodes = null;
$scope.expandRow = function (groupId, sicCode) {
    if (groupId != undefined)
    {
        $scope.twoDigitSicCodes = dataFactory.expandRow.query({ GroupId: groupId }, isArray = true);
        $scope.hideTwoDigitSub = false;
        if (sicCode != null && sicCode != undefined && sicCode != "") {
            if (sicCode.length == 2) {
                $scope.hideTwoDigitSub = false;
                $scope.twoDigitSicCodes = dataFactory.Get2DigitSicCodes.query({ GroupId: groupId }, isArray = true);
            }
        }
    }     
}
    init();
}])

Answer 1

المشكلة هي أنك تستخدم قيمة منطقية واحدة hideTwoDigitSub للسيطرة على كافة trتم إنشاؤها بواسطة الخاص بك ngRepeat:

<tr ng-hide="hideTwoDigitSub">

لذلك عندما تحدد $scope.hideTwoDigitSub = false; كل ngHide داخل الخاص بك ngRepeat يحصل على هذا كاذبة وبالتالي كل tr يتم عرض العناصر.

إصلاح زر الراديو

بدلاً من استخدام قيمة منطقية قمت بتعيينها hideTwoDigitSub إلى groupId للصف الذي تريد إظهاره (وربما إعادة تسميته hideTwoDigitSub ل showTwoDigitSub نظرًا لأن المتغير يشير الآن إلى الصف الذي سيتم إظهاره).

حتى داخل الخاص بك expandRow() الوظيفة التي قمت بتعيين الصف الذي سيتم عرضه عن طريق تغيير:

$scope.hideTwoDigitSub = false;

ل

$scope.hideTwoDigitSub = groupId;

وتغيير ما سبق tr ل:

<tr ng-hide="hideTwoDigitSub != group.GroupId">

لذلك سيتم إخفاء الصف ما لم يكن متغير التحكم الخاص بك hideTwoDigitSub لا يساوي المجموعات الحالية GroupId.

أو قد يكون أكثر وضوحا للاستخدام ngShow (لاحظ أنني غيرت hideTwoDigitSub ل showTwoDigitSub في هذا المثال لأنه أكثر وضوحًا):

<tr ng-show="showTwoDigitSub == group.GroupId">

مكبس زر الراديو

حل خانة الاختيار

هذا الأسلوب هو الأسهل في التبديل hideTwoDigitSub ل showTwoDigitSub- إذن كل شيء أدناه يفترض ذلك.

لهذا النهج، في الداخل init() لقد قمت بتعيين متغير التحكم الخاص بك ليكون مصفوفة:

$scope.showTwoDigitSub=[];

ثم قم بتبديل عنصر التحكم المناسب بالداخل expand:

$scope.showTwoDigitSub[groupId] = !$scope.showTwoDigitSub[groupId]; 

واستخدم المصفوفة داخل html الخاص بك:

<tr ng-show="showTwoDigitSub[group.GroupId]">

الغطاس خانة الاختيار