无法访问子页面 Bootstrap 选项卡中的对象属性

Question

我遇到了 ui bootraps Tab 的奇怪情况，尽管它正确显示了完整内容，但我无法访问对象属性。

控制器 fixtureLiveFormation：

    $scope.statsTabs = [
             { heading: 'Team Stats', route: 'livematch.teamstats', template: '/App/Main/views/dulieu1trandau/report_teamstats.html', active: true },
             { heading: 'Player Stats', route: 'livematch.playerstats', template: '/App/Main/views/dulieu1trandau/report_playerstats.html' }
    ];
    $scope.changeTab = function (route) {
        switch (route) {
            case 'livematch.teamstats':   
                break;
            case 'livematch.playerstats':
dataService.getleagueplayerstats($scope.pagingInfo).then(function (data) {
                    $scope.playerStats = _.filter(data.results, function (item) { return item.PlayerId == 90 });                    
                }); 
                 break;
    <tabset>

查看：

<section ng-controller="fixtureLiveFormation">
      <tab ng-repeat="t in statsTabs" heading="{{t.heading}}" active="t.active" disabled="t.disabled" ng-click="changeTab(t.route)">
           <div ng-include="t.template"></div>
            </tab>
    </tabset>
</section>

在 report_playerstats.html

 <div class="table-responsive">
           {{playerStats.Name}}  => show nothing but

{{playerStats}} -> show 

[{"PlayerId":90,"TeamOwnerId":4,"Name":"Aaron Ramsey","Team":"Arsenal"...}]
</div>

为什么会这样，请指教

谢谢。

Answer 1

我相信发生这种情况是因为您的 _.filter() 方法 returns 玩家数组而不是单个玩家。只需修改您的代码如下：

...
$scope.playerStats = _.filter(data.results, function (item) { return item.PlayerId == 90 })[0];
...

您可以添加一些检查过滤后的数组是否包含项目。

无法访问子页面 Bootstrap 选项卡中的对象属性

Can't access the object properties in child page Bootstrap Tab

angularjs

angular-ui-bootstrap