मेनू चयन में आइटम जोड़कर इसे आइटम्स के समूह में शामिल किया गया है।

HTML कोड:

<div class="user1">
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Products</h3>                    
    </div>
    <div class="panel-body">
       <ul id="accordion" class="accordion" >
          <li ng-repeat="(key, categoryType) in categories">

            <div class="link" >{{categoryType.name}}
              <i class="fa fa-chevron-down"></i>
            </div>
            <ul ng-class="{submenu1: categoryType.name == 'Miscellaneous', submenu: categoryType.name != 'Miscellaneous'}">
              <li ng-repeat="item in categoryType[categoryType.name] track by $index"
                  ng-click="getProductDetails(item)">
                <a href="#">{{item.Name}}</a>
              </li>
            </ul>
          </li>                      
        </ul>
    </div>
</div>

धन्यवाद, रोहन

-1
Rohan 6 अगस्त 2018, 20:47

2 जवाब

प्रत्येक क्लिक के बाद सूची में सभी वस्तुओं के माध्यम से लूपिंग की तुलना में एक अधिक कुशल तरीका केवल चयनित आइटम की अनुक्रमणिका को पकड़ने के लिए एक स्कोप वैरिएबल बनाना होगा, और केवल चयनित इंडेक्स पर कक्षा लागू करना होगा।

सीएसएस

.selected {
  background-color: #EFEFEF;
}

देखें

<li ng-repeat="item in list"
    ng-class="{'selected':selectedItem==$index}"
    ng-click="selectItem($index)">
  {{item.name}}
</li>

नियंत्रक

$scope.selectItem = function(index) {
  $scope.selectedItem = index;
};
0
amallard 7 अगस्त 2018, 00:10

कोणीय जे एस में यह बहुत आसान है:

सबसे पहले, यह वर्णन करने के लिए एक सीएसएस वर्ग बनाएं कि आइटम एक बार चुने जाने के बाद कैसा दिखेगा:

.selected {
  background-color: yellow;
  border: 3px solid black;
}

फिर, जब भी किसी आइटम का चयन किया जाता है तो इस वर्ग को असाइन करने के लिए ng-class का उपयोग करें। आप इसे li या a टैग पर रख सकते हैं। आपकी पंसद:

<li ng-class="{'selected': item.selected}"
    ng-repeat="item in categoryType[categoryType.name] track by $index"
    ng-click="getProductDetails(item)">
  <a href="#">{{item.Name}}</a>
</li>

अब आपको उस फ़ंक्शन को संशोधित करने की आवश्यकता होगी जिसे आइटम पर क्लिक करने पर कॉल किया जाता है, getProductDetails आइटम को चयनित के रूप में चिह्नित करने के लिए। आपको अन्य सभी मदों को अचिह्नित करने की भी आवश्यकता होगी:

function getProductDetails(item) {
  var items = $scope.categoryType[categoryType.name];
  items.forEach(function(x) {
    x.selected = false;
  });
  item.selected = true;

  //... continue with the rest of your function
}
0
georgeawg 7 अगस्त 2018, 03:46