Question

所以我试图遍历一个数组并为其中的每个对象创建一个列表项。

然而，当然后在该项目中添加ng-click时，即使代码打印正确，也会出现以下错误。

Syntax Error: Token '$index' is unexpected, expecting [:]

我有以下代码：

<body ng-controller="VideoController as VidCtrl">

<div class="row" id="grid">
    <div ng-repeat="array in videos" ng-show="VidCtrl.isActive({{$index}})">
        <ul class="small-block-grid-3">
            <li ng-repeat="video in array" ng-click="VidCtrl.setVideo({{$index}})">
                <img src="{{video.image}}">

                <div>
                    <h5>{{video.title}}</h5>
                    <p>{{video.ingress}}</p>
                </div>
            </li>
        </ul>
    </div>
    <ul class="pagination">
        <li ng-class="{'current':isActive($index)}" ng-repeat="array in videos"><a ng-click="VidCtrl.setPanel($index)" href="#">{{$index + 1}}</a></li>
    </ul>
</div>

这是我的js：

var videos = [];
var activeVideo = null;

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

app.controller('VideoController', function($scope){
    $scope.videos = videos;

    this.activePanel = 0;

    this.setPanel = function(val){
        this.activePanel = val;
    }

    this.isActive = function(val){
        return this.activePanel === val;
    }

    this.setVideo = function(vidIndex){
        console.log(videos[this.activePanel][vidIndex]);
    }
});

视频数组具有以下结构。

var videos = [
    [
        {
            image: "foo",
            title: "bar",
            ingress: "foobar",
        },
        {},
        {}
    ],
    [
        {},
        {},
    ]
]

我是棱角分明的新人，所以对我很轻松。

Answer 1

使用这些指令时，您可以使用不插值{{}}的变量。此外，您可以对图片使用ng-src，而不是src。

<body ng-controller="VideoController as VidCtrl">

<div class="row" id="grid">
    <div ng-repeat="array in videos" ng-show="VidCtrl.isActive($index)">
        <ul class="small-block-grid-3">
            <li ng-repeat="video in array" ng-click="VidCtrl.setVideo($index)">
                <img ng-src="{{video.image}}">

                <div>
                    <h5>{{video.title}}</h5>
                    <p>{{video.ingress}}</p>
                </div>
            </li>
        </ul>
    </div>
    <ul class="pagination">
        <li ng-class="{'current':isActive($index)}" ng-repeat="array in videos"><a ng-click="VidCtrl.setPanel($index)" href="#">{{$index + 1}}</a></li>
    </ul>
</div>

Answer 2

我注意到的一些事情：

从ng-show和ng-click

中删除插值

<div ... ng-show="VidCtrl.isActive($index)">
    ...
        <li ... ng-click="VidCtrl.setVideo($index)">

将src替换为ng-src

<img ng-src="{{video.image}}">

使用$ index作为参数的ng-click函数抛出意外的令牌错误

2 个答案: