无法追加AngularJS数组

问题描述 投票:2回答:1

我希望标题不会太混乱。

我的angular.js文件中有一个数组:

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

app.controller('resumeCtrl', function($scope, $document) {
  $scope.projects = [
    {
        title: 'TRU Colors Brewing Co.',
        image: 'images/tcb_screenshot.png',
        url: 'https://www.trucolors.co',
        category: ['development', 'design']
    },
    {
        title: 'JOMO',
        image: 'images/jomo_screenshot.png',
        url: 'https://jeffberlin.github.io/JOMO_website/index.html',
        category: 'development'
    }
];

在我的HTML文件中,我有:

<div class="row portfolio-preview">

  <div class="col-lg-4 text-center" ng-repeat="x in projects">

    <div class="projects tab-content active">

       <figure class="tab-pane">
         <a ng-href="{{x.url}}" target="_blank">
          <img class="img-fluid screenshot" ng-src="{{x.image}}">
         </a>                         
       </figure>

   <div class="description">

     <a href="" target="_blank">
      <h5>{{x.title}}</h5>
     </a>
   </div>

  </div>

</div>

现在我的问题是,我得到了与标题一起显示的正确数量的框,但是没有其他任何显示/显示来自数组。作为参考,本节将在nav区域中有3个选项并将其过滤掉(通过category),假设这是最好的选择。任何人都可以看到我可能做错的事吗?

所显示的HTML代码是我能够通过使用titlesx in projectsx.image等至少能够显示x.title的唯一方法。

P.S.-我对Angular很新,但感谢你们抽出时间来帮忙!

html angularjs
1个回答
0
投票

您需要提供图像文件夹的相对路径。路径需要相对于html文件的位置,以便浏览器知道正确的位置。

在图片网址前添加./。

$scope.projects = [
{
    title: 'TRU Colors Brewing Co.',
    image: './images/tcb_screenshot.png',
    url: 'https://www.trucolors.co',
    category: ['development', 'design']
},
{
    title: 'JOMO',
    image: './images/jomo_screenshot.png',
    url: 'https://jeffberlin.github.io/JOMO_website/index.html',
    category: 'development'
}

];

并且正如评论中指出的那样,你的CSS可能会导致图像被隐藏或者没有宽度或高度。所以在调试时不要忘记检查css。

© www.soinside.com 2019 - 2024. All rights reserved.