html - AngularJS ng-repeat in div tag issue -
i can't able loop array in div tag.
my javascript source code is
<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 dropped in list1 $scope.optionslist1 = { accept: function(dragel) { if ($scope.list1.length >= 2) { return false; } else { return true; } } }; }); </script> my html source code is
<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> kindly assist me how loop array using angularjs ng-repeat in div tag. there error in source code. kindly fine tune it.
the output screen shot 
i success ng-repeat on div element.
i removed drag , drop because not relevant you'r question.
see code below.
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 dropped in list1 $scope.optionslist1 = { accept: function(dragel) { if ($scope.list1.length >= 2) { return false; } else { return true; } } }; });<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>
Comments
Post a Comment