CODEWITHSUNDEEP
angularjs
seahorse
seahorse

Reputation: 2470

AngularJS gives index as blank inside ng-repeat

I used the following code but I get the index as blank, also I am not able to access r and c using the angular js expression {r} and {c} , that is blank too. What could be the reason? (There are no errors on Javascript console) I need to set the color of the div element on page load based of r and c

<div id="SecondType">
    <div style="float:left;margin-left:20px;">
        <div ng-repeat="r in [1, 2, 3, 4, 5,6]">
            <span class="grid1"  ng-repeat="c in [1, 2, 3, 4,5]" 
                  x-lvl-draggable='true' x-lvl-drop-target="true" 
                  x-on-drop="dropped(dragEl, dropEl, r, c,0)" 
                  index={{$index}} row="{{r}}" col="{{c}}">
            </span>
        </div>
    </div>
</div>

The above code run standalone in plunker works though when you dont use the directives for draggable.

I used the directives from this site, can it be because of those directives ? http://logicbomb.github.io/ng-directives/drag-drop.html

UPDATE: On further debugging I realize that it is due to the following module since when I comment the module the indexes do appear, but still do not know how to fix it

module.factory('uuid', function() {

var svc = {
    new: function() {
        function _p8(s) {
            var p = (Math.random().toString(16)+"000000000").substr(2,8);
            return s ? "-" + p.substr(0,4) + "-" + p.substr(4,4) : p ;
        }
        return _p8() + _p8(true) + _p8(true) + _p8();
    },

Upvotes: 0

Views: 377

Answers (4)

boindiil
boindiil

Reputation: 5865

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="SecondType" ng-app>
    <div style="float:left;margin-left:20px;">
        <div ng-repeat="r in [1, 2, 3, 4, 5,6]">
            <span class="grid1"  ng-repeat="c in [1, 2, 3, 4,5]" 
                  x-lvl-draggable='true' x-lvl-drop-target="true" 
                  x-on-drop="dropped(dragEl, dropEl, r, c,0)" 
                  index={{$index}} row="{{r}}" col="{{c}}">
                  Inner {{$index}} Outer {{$parent.$index}}<br />
            </span>
        </div>
    </div>
</div>

Upvotes: 0

sylwester
sylwester

Reputation: 16498

var app = angular.module('app', []);

app.controller('homeCtrl', function ($scope) {

$scope.msg="hellp"
   

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <div ng-app="app">
    <div ng-controller="homeCtrl">
<div id="SecondType">
    <div style="float:left;margin-left:20px;">
        <div ng-repeat="r in [1, 2, 3, 4, 5,6]">
           <span class="grid1"  ng-repeat="c in [1, 2, 3, 4,5]" 
                  x-lvl-draggable='true' x-lvl-drop-target="true" 
                  x-on-drop="dropped(dragEl, dropEl, r, c,0)" 
                  index="{{$index}}" row="{{r}}" col="{{c}}">
            [ {{$index}}-{{c}}]
            </span>
        </div>
    </div>
</div>

Upvotes: 0

dmahapatro
dmahapatro

Reputation: 50245

I do not see that as a problem. Check here. Only correction required is " (closing quotes after col="{{c}}") in span which was missing and </div> tag missing. See my edit to question.

<span class="grid1"  ng-repeat="c in [1, 2, 3, 4,5]" 
              x-lvl-draggable='true' x-lvl-drop-target="true" 
              x-on-drop="dropped(dragEl, dropEl, r, c,0)" 
              index={{$index}} row="{{r}}" col="{{c}}">

Upvotes: 1

paulmelnikow
paulmelnikow

Reputation: 17208

Don't know exactly what you're looking for here, but I added two missing closing quotes and it seems to be printing out the indices now.

Upvotes: 0

Related Questions