Question

我正在尝试在JS中创建一个可搜索的数组。我希望数组只作为图像显示，然后使用'标签'来过滤和搜索这个数组。

如果我有这样的话：

function NotebookListCtrl($scope) {
  $scope.notebooks = [
    {"name": "Lenovo",
     "processor": "Intel i5",
     "age": 2011},

//more notebooks... 

    {"name": "Toshiba",
     "processor": "Intel i7",
     "age": 2010},
  ];
  $scope.orderList = "name";
}

有没有办法可以使用......

notebooks[0] = new Image();
notebooks[0].src = 'images/img/image1.jpg';

因此，当显示笔记本项目[0]时，它会显示图像吗？相对较新的JS，我试图拼凑一些东西。谢谢你的帮助！

Answer 1

我的建议是避免使用Image对象，除非你需要在JS代码中预先加载图像，并且只为你的数组中的每个产品存储img src路径，如：

 $scope.notebooks = [
    {"name": "Lenovo",
     "processor": "Intel i5",
     "age": 2011
     "img": "images/img/image1.jpg"    
    },
// ...

然后在您的img标签中，您可以相应地指向每个产品的来源。

您可以配置您的Web服务器以告知浏览器缓存图像，以便增强img加载时间。

Answer 2

无需创建新图像。这与html和显示图像有关，而不是其他任何事情：

function NotebookListCtrl($scope) {
  $scope.notebooks = [
    {"name": "Lenovo",
     "processor": "Intel i5",
     "age": 2011,
     "src": 'images/img/image1.jpg'
    },

//more notebooks... 

    {"name": "Toshiba",
     "processor": "Intel i7",
     "age": 2010,
     "src": 'images/img/image2.jpg'
    },
  ];
  $scope.orderList = "name";
}

<div 
     ng-repeat="notebook in notebooks | orderby: orderList">
    <p>name: {{notebook.name}}</p>
    <p>processor: {{notebook.processor}}</p>
    <p>age: {{notebook.age}}</p>
    <img 
         ng-if="notebook.src"
         ng-src="{{notebook.src}}">
</div>

只需设置图像源并使用html中的ng-src属性设置图像源。

将图像存储到数组中

2 个答案: