Question

我正在使用带有jQuery的HTML5模板的AngularJS。我正面临着切换div的问题（如果你切换。它会进一步打开一个表单。）我有一个像

这样的集合

 CategoryName1 
 CategoryType1
     ItemCollection1[]
     ItemCollection2[]

 CategoryName2 
 CategoryType2
     ItemCollection1[]
     ItemCollection2[]

我想要显示这样的集合

<div class="tab-pane fade in active" id="tab-1"  ng-repeat="cat in    categories">
   {{cat.Name}}, {{cat.Type}}
       <div class="item-list right-checkout"  ng-repeat="item in cat.Items">
          {{item.Name}}, {{item.Price}} <button class="toggle">Option</button>
       </div>
</div>

上面的切换按钮切换

下面的div

  <div class="dropdown-option clearfix">
        <div class="dropdown-details">
            <form class="default-form">
                <h5>Please Select Your Option</h5>
                     <h6>Option</h6> 
                       ------
                       ------
            </form>
         </div>
   </div>

我面临的问题是..一旦我提供ng-repeat，切换按钮就会停止工作。

我尝试创建嵌套指令，因为有嵌套的ng-repeat。它没有用。但是当我用子模板包含我的自定义Javascript（处理切换）时。它与“但是”有关。但它是否在循环中连续切换等于父项计数。请指导我如何克服这个问题。

或者有没有办法在UI上调用指令，如下所示

 <div ng-repeat="cat in categories">
      <div show-categories category="cat">
         <div item-categories item="cat.Items"> </div> /*displays items withing that categories)*/
       </div>
 </div>

我想要的只是避免ng-repeat内部指令。

Answer 1

通常我会使用范围参数和ng-show / ng-if进行切换，不确定这是否是您想要的。

＆＃13;

angular.module('test', [])

.controller('Test', function($scope) {
  $scope.parents = [{
    name: "parent 1",
    children: [{
      name: "p1 child 1",
      form: "p1 c1 form"
    }, {
      name: "p1 child 2",
      form: "p1 c2 form"
    }]
  }, {
    name: "parent 2",
    children: [{
      name: "p2 child 1",
      form: "p2 c1 form"
    }, {
      name: "p2 child 2",
      form: "p2 c2 form"
    }]
  }]
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>

<div ng-app='test' ng-controller='Test'>
  <div ng-repeat="parent in parents">
    {{parent.name}}
    <div ng-repeat="child in parent.children">
      {{child.name}}
      <button type="button" ng-click="child.isOpen = !child.isOpen">Toggle</button>
    </div>
  </div>
  
  <br><br>
  <div ng-repeat="parent in parents">
    <div ng-repeat="child in parent.children">
      <div ng-show="!!child.isOpen">{{child.form}}</div>
    </div>
  </div>
</div>

＆＃13;

使用ng-repeat和Jquery导致麻烦

1 个答案: