如果搜索匹配只显示产品

我有一个简单的搜索和列表设置。但只希望在下面展示产品，如果我们得到型号的匹配。如果搜索匹配只显示产品

是否只是切换或调整ng-repeat？理想情况下，如果未找到型号，则会显示未找到产品型号的错误。

下面是代码和Plunker：

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
     <title></title> 

     <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
     <link href="css/style.css" rel="stylesheet"> 

     <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
     <link href="css/ionic.app.css" rel="stylesheet"> 
     --> 

     <!-- ionic/angularjs js --> 
     <script src="lib/ionic/js/ionic.bundle.js"></script> 

     <!-- cordova script (this will be a 404 during development) --> 
     <script src="cordova.js"></script> 

     <!-- your app's js --> 
     <script src="js/app.js"></script> 
    </head> 
    <body ng-app="starter"> 

     <ion-pane> 
     <ion-header-bar class="bar-dark"> 
      <h2 class="title">Product List</h1> 
      </ion-header-bar> 
      <div class="bar bar-subheader item-input-inset bar-light"> 
      <label class="item-input-wrapper"> 
       <i class="icon ion-search placeholder-icon"></i> 
       <input type="search" ng-model="query" placeholder="Search"> 
      </label> 
      </div> 

     <ion-content ng-controller="ListController" class="has-subheader"> 
      <ion-list> 
      <ion-item ng-repeat="item in products | filter:query" class="item-thumbnail-left item-text-wrap"> 
       <img src="img/{{item.products_image}}" alt="{{item.products_name}} Photo"> 
       <h2>{{item.products_name}}</h2> 
       <h3>{{item.products_model}}</h3> 
       <p>{{item.products_price}}</p> 
      </ion-item> 
      </ion-list> 
     </ion-content> 
     </ion-pane> 
    </body> 
    </html> 

    // Ionic Starter App 

    // angular.module is a global place for creating, registering and retrieving Angular modules 
    // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) 
    // the 2nd parameter is an array of 'requires' 
    angular.module('starter', ['ionic']) 

    .run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
     if(window.cordova && window.cordova.plugins.Keyboard) { 
     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
     // for form inputs) 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 

     // Don't remove this line unless you know what you are doing. It stops the viewport 
     // from snapping when text inputs are focused. Ionic handles this internally for 
     // a much nicer keyboard experience. 
     cordova.plugins.Keyboard.disableScroll(true); 
     } 
     if(window.StatusBar) { 
     StatusBar.styleDefault(); 
     } 
    }); 
    }) 

    .controller('ListController', ['$scope', '$http', function($scope, $http) { 
      $http.get('js/products.json').success(function(data) { 
      $scope.products = data; 
      }); 
    }]);

https://plnkr.co/edit/A8AhWZDBjjv8wUJjh69Y?p=preview

来源

2016-06-08 me9867

如果您有一个基于型号进行搜索，然后试着写的搜索框一样

<input type="search" ng-model="query.products_model" placeholder="Search">

来源

2016-06-08 10:03:02

它变得项目只有在比赛发生时才显示，这正是我正在努力的方向。 – me9867

请详细解释你想要的结果。 –

如果搜索匹配只显示产品

回答

相关问题