نغوبتيونس تحديد جميع الخيارات افتراضيا وخيارات تختفي على تحديد

Question

أواجه مشكلة غريبة لا أستطيع أن يبدو لاستكشاف مع وجهة نظري.أنا باستخدام التوجيه الذي يولد تريفيو من موقع الويب الخاص بي.عندما أختار موقعا واحدا ، يكون لدي مربعان محددان يمتلئان بالمجموعات في موقع واحد والقوائم الموجودة في الموقع.عند ملء الخيارات ، يتم تحديدها جميعا.لقد فتشت العناصر وجميعهم لديهم option="selected" الغريب هو أنه عندما أنقر على خيار واحد ، تختفي جميع الخيارات الأخرى ويبقى الخيار المحدد فقط.لقد راجعت المصدر في وحدة التحكم كروم ونعم يبقى فقط علامة الخيار المحدد.

بالنسبة إلى إكسمابل ، يحتوي مربع تحديد قوائم الموقع على خيارات متعددة ولكن عندما نقرت على المستندات القديمة ، اختفى الآخرون جميعا.في مجموعات المواقع ، يتم تحديد جميع المجموعات بالفعل السيطرة:

spApp.controller('sitesCtrl',
    function sitesCtrl($scope, $q, $modal, UserService, GroupService, SiteService){
        //Options for tree controller directive
        $scope.treeOptions = {
            nodeChildren: "children",
            dirSelectable: true,
            injectClasses: {
                ul: "a1",
                li: "a2",
                liSelected: "a7",
                iExpanded: "a3",
                iCollapsed: "a4",
                iLeaf: "a5",
                label: "a6",
                labelSelected: "a8"
            }
        }

        //Returns siteMap for tree controller directive 
        $scope.siteMap = SiteService.getSiteMap();

        //Returns selected sites information: grous, lists, title, url
        $scope.showSelected = function(site){
            var siteData = SiteService.getSiteInfo(site);
            //sets sites title and url in view
            $scope.site = site;
            $scope.siteGroups = siteData.groups;
            $scope.siteLists = siteData.lists;
        }

    }
);

عرض:

    <div class="siteGroups">
        <label for="siteGroups">Site Groups</label>
        <select 
            multiple
            name="siteGroups" 
            id="siteGroups" 
            class="siteGroups"
            ng-model="siteGroups"
            ng-options="g.name for g in siteGroups">
        </select>
    </div>
        <div class="btm1 animated fadeInUp">
        <label for="siteLists">Site Lists </label>
        <select multiple
            id="siteLists" 
            ng-model="siteLists"
            ng-options="l.title for l in siteLists">
        </select>
    </div>

خدمة وأكثر من وجهة نظر

Answer 1

هذا يحدث لأن ngOptions في قوائم تحديد يحدها إلى نفس مجموعة ngModel. ngModel يجب أن يكون مصفوفة مختلفة تحتوي فقط على القيم المحددة.

مع siteGroups على سبيل المثال ، ما يحدث هو تهيئة خيارات قائمة التحديد باستخدام siteGroups, ، ويتم اختيارهم جميعا لأن العناصر موجودة في ngModel (أيضا siteGroups صفيف).عند النقر على واحد منهم ، فإنه يزيل الآن جميع العناصر الأخرى من ngModel ما عدا الذي نقرت عليه.منذ ngOptions يحدها من نفس القائمة ، تختفي جميع الخيارات غير المحددة أيضا.

لإصلاح ذلك ، قم بإنشاء خصائص صفيف منفصلة في نطاقك للقيم المحددة في كل قائمة.