Question

我必须在Tizen TV上显示几个产品列表，一个按类别列出。我正在使用Caph 3.1.0 with angular和Samsung TOAST。

首先，我连接到我们的服务器以获取我们的所有产品，然后使用这些产品。每个产品都有一个或几个“类别”字段，然后我使用产品获取$ scope.categories中的类别，并在$ scope.sortedList中对产品进行排序，如下所示：

controller.js中的代码

$scope.categories = ['A', 'B', 'C'];
$scope.sortedList = [
  A: [P1, P2],
  B: [P1, P3, P4],
  C: [P2, P5]
]

然后在html文件中，我使用了caph视频播放器示例（https://www.samsungdforum.com/caphdocs/main.html?type=angular&doc=demo&p1=0）：

main.html中的代码：

<div id="list-category" class="list-category">
  <play-list ng-repeat="cat in categories" id="{{cat}}"></play-list>
</div>

playlist.html中的代码

<div class="list-area" ng-class="{'list-fadeout': currentCategory !== listCategory}">
  <caph-list id="list-{{listCategory}}" container-class="list-container" items="item in sortedList[listCategory]" on-scroll-start="onScrollStart($context)" on-scroll-finish="onScrollFinish($context)" mouse-scroll-area-size="40" loop="false">
    <div id="{{listCategory}}-{{item.id}}" class="item" focusable="{depth: {{DEPTH.INDEX}}, nextFocus: {down: 'btnPlay'}}" data-focusable-initial-focus="{{$index === 0}}" on-focused="focus($event, listCategory, this, $index)" on-blurred="blur($event, listCategory, this)" on-selected="booting.show=true">
      <img ng-if="item.mainUrl" ng-src="{{item.mainUrl}}" alt="{{item.name}}" title="{{item.name}}" style="width: 300px; height: 200px;"/>
    </div>
  </caph-list>
</div>

playList指令与示例中的完全相同。

这是我的CSS文件：

main.css中的代码

.list-container {
  position: absolute;
  width: 1680px;
  height: 265px;
  overflow: hidden;
  margin-top: 0;
  padding-top: 25px;
  background-color: #e6e6e6;
}

.item {
  position: relative;
  width: 300px;
  height: 200px;
  -webkit-box-sizing: border-box;
  margin: 0 14px 0 0;
}

在index.html文件中，css包含在任何js文件之前。

然后我启动'cordova emulate browser'命令在Chrome浏览器中查看结果，但我一直收到错误：

浏览器出错：

Error: The caph-list's container and template view should have their own size such as width and height.

我尝试删除了playList指令，并使用ng-repeat直接放入caph-list，但结果相同。

有人可以帮忙吗？

由于

Answer 1

我直接写信给caph@samsung.com，他们回答很快：＆＃34; caph-list的当前版本（3.1.x）不支持使用ng-repeat嵌套。＆＃34;

我目前正在用共同的div重新开发整个东西，以获得我需要的功能。

此致

caph-list在多个列表时不起作用

1 个答案: