具有ng-repeat和ng-show索引的Angularjs(可扩展列表)

时间:2018-03-22 11:34:54

标签: angularjs

我的ng-show index有问题。我想要的是更改ng-show index。例如:

 <div class="row" ng-repeat="list1 in Items track by index">
         <button ng-click="vm.showLoc($index)">

       <div class="row" ng-repeat="list2 in listGroup track by index" ng-show="..">
           <div class="row" ng-repeat="listItem in list track by index">
           </div>
        </div>
 </div>

当我单击页面中的按钮时,应该显示具有索引值的按钮列表发送的索引值。当我点击功能运行下面的按钮时。

    function showLoc(index){
    vm.show=index;
    }

你有什么想法吗?

例如:我在项目中有2个项目,所以我有两个按钮。当我单击第一个按钮时,我想要显示属于第一个listGroup [0]的值。当我单击第二个按钮时,属于的值应该显示第二个listGroup [1]。换句话说,我的listGroup也有两个值,但第一个值包含20个项目。第二项包含10项。

1 个答案:

答案 0 :(得分:1)

(function() {
    'use strict';
angular
  .module('myApp', [])
  .controller('myCtrl', myCtrl);

   function myCtrl(){
       /* jshint validthis: true */
       var vm=this;
       vm.activeIndex = null;
       vm.items = [0, 1];
       vm.listGroup = [
          ['lg1a', 'lg1b', 'lg1c'],
          ['lg2a','lg2b','lg2c']
         ];
       vm.showLoc = showLoc;
       
       
       
      function showLoc(i){
        vm.activeIndex = i;
      }
      
   } 

})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myCtrl as vm">

    <div class="row" ng-repeat="list1 in vm.items track by $index">
      <button ng-click="vm.showLoc($index)">
          show loc
        </button>

      <div class="row" ng-repeat="list2 in vm.listGroup[$index]" ng-show="$parent.$index == vm.activeIndex" track by $index>
        <span>{{list2}}</span>
      </div>


    </div>
  </div>
</div>