Question

我有一个音乐商店类型的应用程序，我使用PHP从数据库中获取特定乐器的图像和名称。我想要一个动态过滤乐器的搜索栏，我想使用AngularJS来做到这一点。在AngularJS中创建$ watch之后我遇到了麻烦。我知道如何使用JS对象进行过滤，但我遇到了这种情况的问题。

我假设我可以从所需元素的innerHTML创建一个JS对象。然后我可以使用ng-repeat根据输入搜索框中的内容过滤对象。这是一个有效的选择吗？如果有，还有其他选择吗？

HTML / PHP

<div ng-controller="instController">
  <div class="col-md-12" id="search-instrument-wrapper">
  <input class="searchbar" type="text" ng-model="searchInst" placeholder="Search Instruments"/>
  </div>

<?php foreach ($instruments as $singleInstrument) : ?>
  <div class="col-md-4 instrument-wrapper">
   <a href='instruments/<?php echo $singleInstrument; ?>.php#/'>
    <span class="inst-thumbnail">     
    <img class="img-responsive instrument-images" src="images/<?php echo $singleInstrument; ?>"/>     
    </span>
   </a>
   <a href='instrument/<?php echo $singleInstrument ?>/<?php echo $singleInstrument ?>.php#/'>
   <h3 class="instrumentName"><?php echo $instrumentInfo['instrumentName'];?></h3>
   </a>  
  </div>
</div>
<?php endforeach; ?>
<?php endif; ?>

AngularJS

instApp.controller('instController',['$scope', function($scope){
   $scope.searchInst = '';
   $scope.$watch('searchInst',function(newVal,oldVal){    
     /*** MY ATTEMPT ***/
        if(!$( ".instrumentName:contains('"+newVal+"')" )){
                   $(this).parent().css( "display",
        "none" );}
     /******************/
   });
}]);

Answer 1

我能够按照评论中描述的方式做到这一点：

关键是将数据从数据库发布到foreach循环并连接字符串以创建JSON对象。然后使用ng-init初始化要使用的ng-repeat的JSON。适合我

<强> PHP

foreach($instrumentsArray as $instruments){

$jsonStatement .= '{
               name:"' . $instrumentInfo['instrumentName'] . '"' .
             ',url: "user/' . $instruments . '/' . $instruments . '.php#/"'. 
             ',img: "user/' . $instruments . '/images/' . $instrumentPicInfo['instrumentPic'] . '"},';                    


$jsonComplete = 'instruments = [' . $jsonStatement . ']';

<强> HTML

<div ng-init='<?php echo $jsonComplete;?>'></div>
<div class="col-md-12" id="search-instruments">
    <input class="searchbar" type="text" ng-model="searchinstruments"  placeholder="Search Instruments"/>
</div>
<div class="col-md-4 instrumentWrapper" ng-repeat="instrument in instruments | filter: searchinstruments">
     <a href='{{instrument.url}}'>
       <span class="instruments-thumbnail">     
         <img class="img-responsive user-images" src="{{instrument.img}}"/>       
       </span></a>
     <a href='{{instrument.url}}'><h3 class="instrumentName">{{instrument.name}}</h3></a>  
</div>

使用AngularJS和PHP过滤搜索查询

1 个答案: