Question

我正在一个小型网站上工作，我正在从JSON文件调用一系列项目（此工作正常）。但是我想让用户选择查看“所有项目”或“可用项目”或“不再有可用项目”。我正在使用HTML select 元素创建一个下拉列表，用户可以在其中选择要查看的内容。

但这是我遇到问题的部分。我让我的代码查看Item是什么类型（如果JSON中可用或不可用，则为“ typ”）。但是当我运行该应用程序时，这些选项未显示在我的 select 选项中，并且我的代码返回了所有项目。

任何建议深表感谢。谢谢

[{
"ID": "1",
"Image": "Images/Home1.jpg",
    "Name": "Home 1",
    "Text": "This is the Image of home 1",
"typ": ["Sold"]  /* should filter using this */
},
{
"ID": "2",
"Image": "Images/Home2.jpg",
    "Name": "Home 2",
    "Text": "This is the Image of home 2",
"typ": ["Available"] /* should filter using this */

}
]

  var self = this;
  var delaytime = 500;
  $timeout(function(){
      $http({
        method: 'GET',
        url: 'JSON/HomeProjects.json'
      }).then(function(response) {
          self.projectItems = response.data;

          self.QueryArray = [];

          for (var i = 0; i < self.projectItems.length; i++){
            for (var k = 0; k < self.projectItems[i].typ.length; k++){
              self.QueryArray.push(self.projectItems[i].typ[k]);
            }
          }

          self.uniqueTypes = self.QueryArray.filter(function(myItem, index){
              return self.QueryArray.indexOf(myItem) == index;
          });

      },self.customFilter = function(myItem){

          if(myItem===null){
              return "";
          }
          else{
              return myItem;
          }
      },function (error){
          console.log("There is an error");
      });

  },delaytime);

<div class="Projects_FilterBar">
 <p class="Projects_Filt_txt"><strong>Search By:</strong></p>
  <select class="Project_Options" ng-model="selected"
          ng-options="myItem.typ for myItem in uniqueTypes">
   <option value="">All</option>
  </select>
</div>
<div class="Projects_Container">
  <ul class="Projects_List" ng-repeat="Item in $ctrl.projectItems | 
  filter: customFilter(selected)">
<div class="Project_Item_Cont">
  <a href="#!/projects/{{Item.ID}}"><img class="Project_Image" ng-src=" 
   {{Item.Image}}" alt="{{Item.Text}}" /></a>
  <li class="Project_Item">{{Item.Name}}</li>

</div>
</ul>
</div>

AngularJS（1.6.6）ngOptions过滤器不起作用（不执行任何操作）

0 个答案: