Question

我无法在div标签中循环数组。

我的JavaScript源代码是

<script type="text/javascript">
      var App = angular.module('drag-and-drop', ['ngDragDrop']);

      App.controller('oneCtrl', function($scope, $timeout) {
        $scope.list1 = [];
        $scope.list2 = [];
        $scope.list3 = [];
        $scope.list4 = [];

        $scope.list5 = [
          { 'title': 'Item 1', 'drag': true },
          { 'title': 'Item 2', 'drag': true },
          { 'title': 'Item 3', 'drag': true },
          { 'title': 'Item 4', 'drag': true },
          { 'title': 'Item 5', 'drag': true },
          { 'title': 'Item 6', 'drag': true },
          { 'title': 'Item 7', 'drag': true },
          { 'title': 'Item 8', 'drag': true }
        ];

        // Limit items to be dropped in list1
        $scope.optionsList1 = {
          accept: function(dragEl) {
            if ($scope.list1.length >= 2) {
              return false;
            } else {
              return true;
            }
          }
        };
      });
    </script>

我的HTML源代码是

<div class="btn btn-droppable" ng-repeat="item in list5" data-drop="true" ng-model='list5' data-jqyoui-options="{accept:'.btn-draggable:not([ng-model=list5])'}"  jqyoui-droppable="{index: {{$index}}}">
    <div class="btn btn-info btn-draggable" data-drag="{{item.drag}}" data-jqyoui-options="{revert: 'invalid'}" ng-model="list5" jqyoui-draggable="{index: {{$index}},placeholder:true,animate:true}" ng-hide="!item.title">{{item.title}}</div>
</div>

请帮助我如何使用div标签中的angularjs ng-repeat循环数组。我的源代码中是否有任何错误。请好好调整一下。

输出屏幕截图是

Answer 1

我成功在div元素上进行ng-repeat。

我删除了拖放，因为它与您的问题无关。

请参阅下面的代码。

＆＃13;

 var App = angular.module('app', []);

       App.controller('oneCtrl', function($scope, $timeout) {
         $scope.list1 = [];
         $scope.list2 = [];
         $scope.list3 = [];
         $scope.list4 = [];

         $scope.list5 = [{
           'title': 'Item 1',
           'drag': true
         }, {
           'title': 'Item 2',
           'drag': true
         }, {
           'title': 'Item 3',
           'drag': true
         }, {
           'title': 'Item 4',
           'drag': true
         }, {
           'title': 'Item 5',
           'drag': true
         }, {
           'title': 'Item 6',
           'drag': true
         }, {
           'title': 'Item 7',
           'drag': true
         }, {
           'title': 'Item 8',
           'drag': true
         }];

         // Limit items to be dropped in list1
         $scope.optionsList1 = {
           accept: function(dragEl) {
             if ($scope.list1.length >= 2) {
               return false;
             } else {
               return true;
             }
           }
         };
       });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="oneCtrl">
    <div ng-repeat="item in list5" ng-model='list5'>
      <div ng-model="list5">{{item.title}}</div>
    </div>
  </div>
</div>

＆＃13;

在div标签问题中AngularJS ng-repeat

1 个答案: