Question

我使用了以下代码，但是我将索引视为空白，而且我无法使用angular js expression {r}和{c}访问r和c，这也是空白。可能是什么原因？（Javascript控制台上没有错误）我需要根据r和c

设置页面加载时div元素的颜色

<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>

上面的代码在plunker中独立运行，但是当你不使用draggable指令时。

我使用了这个网站的指令，是不是因为那些指令？ http://logicbomb.github.io/ng-directives/drag-drop.html

更新：在进一步调试时，我意识到它是由于以下模块，因为当我评论模块时索引确实出现，但仍然不知道如何解决它

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();
    },

Answer 1

我不认为这是一个问题。检查here。只需要进行更正"（col="{{c}}"后的结束引号），其中缺少</div>标记。请参阅我的编辑内容。

<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}}">

Answer 2

不知道你在这里找到了什么，但是我添加了两个错过的收尾报价，现在似乎正在打印指数。

Answer 3

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>

Answer 4

<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>

AngularJS在ng-repeat内给出索引为空白

4 个答案: