Question

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

只是转换或调整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

Answer 1

如果您必须根据型号进行搜索，请尝试编写

之类的搜索框

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

仅搜索匹配时才显示产品

1 个答案: