фильтр по выбранному элементу в выпадающем списке

Я пытаюсь сделать мой {{client.tenant}} источником для фильтрации моей таблицы позже. таблица должна видеть только клиента 1 или клиента 2 на основе выбора в моем выпадающем списке. У меня такое ощущение, что ввод в моем выпадающем списке нигде не хранится. у вас есть несколько советов, что я делаю неправильно? вниз - образец из моего кода. Я тестировал вокруг много, поэтому извините за код :)фильтр по выбранному элементу в выпадающем списке

<body> 
    <div class="container" ng-controller="menuController"> 
     <select> 
    <option ng-model="dropdownString" ng-repeat="client in products | unique:'tenant'">{{client.tenant}}</option> 
</select> 
     <div class="tab-content"> 
      <ul class="media-list tab-pane fade in active"> 
       <div class="row row-content"> 
        <div class="col-xs-12"> 
         <ul class="media-list"> 
          <li class="media"> 
           <div class="media-left media-middle"> 
           </div> 
           <div class="media-body"> 
            <table> 
             <tr> 
              <th class="table-1">Product description</th> 
              <th>SKU</th> 
              <th>Tenant</th> 
              <th>Select</th> 
             </tr> 
             <tr ng-repeat="product in products | searchFor:searchString"> 
              <td>{{product.description}}</td> 
              <td>{{product.sku}}</td> 
              <td>{{product.tenant}}</td> 
              <td><input type="checkbox"></td> 
             </tr> 
            </table> 
           </div> 
          </li> 
         </ul> 
      </ul> 
      </div> 
      </div> 
     </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
    <script> 
     var app = angular.module('productBackend', []); 
     app.controller('menuController', function ($scope, $http) { 
      $scope.search=[]; 
      $http.get('./scripts/products.json') 
       .then(function (res) { 
        $scope.products = res.data; 
       }); 
     }); 

     app.filter('searchFor', function() { 
      return function (arr, searchString) { 
       if (!searchString) { 
        return arr; 
       } 
       var result = []; 
       searchString = searchString.toLowerCase(); 
       angular.forEach(arr, function (item) { 
        if (item.tenant.toLowerCase().indexOf(searchString) !== -1) { 
         result.push(item); 
        } 
       }); 
       return result; 
      }; 
     }); 

app.filter('unique', function() { 
    return function(collection, keyname) { 
     var output = [], 
      keys = []; 
     angular.forEach(collection, function(item) { 
      var key = item[keyname]; 
      if(keys.indexOf(key) === -1) { 
       keys.push(key); 
       output.push(item); 
      } 
     }); 
     return output; 
    }; 
}); 

app.controller('ExampleController', ['$scope', function($scope) { 
    $scope.data = { 
    singleSelect: null, 
    multipleSelect: [], 
    option1: 'option-1' 
    }; 

    $scope.forceUnknownOption = function() { 
    $scope.data.singleSelect = 'nonsense'; 
    }; 
}]); 
    </script> 
</body>

JSon Файл:.

[{ 
    "sku": "S-MLX-SEC-002", 
    "description": "Intrusion Prevention", 
    "tenant": "Customer 1" 
}, { 
    "sku": "S-MLX-MCA-007", 
    "description": "Microsoft Lync Enterprise - Private Cloud", 
    "tenant": "Customer 1" 
},{ 
    "sku": "S-MLX-SEC-002", 
    "description": "Intrusion Prevention", 
    "tenant": "Customer 1" 
}, { 
    "sku": "S-MLX-SEC-004", 
    "description": "Local privacy compliance", 
    "tenant": "Customer 1" 
}, { 
    "sku": "S-MLX-S02-100", 
    "description": "Location based Access", 
    "tenant": "Customer 1" 
},{ 
    "sku": "S-MLX-SEC-002", 
    "description": "Intrusion Prevention", 
    "tenant": "Customer 1" 
}, { 
    "sku": "S-MLX-S02-510", 
    "description": "Two factor authentication - Hard Token Security", 
    "tenant": "Customer 1" 
}, { 
    "sku": "S-MLX-MCA-007", 
    "description": "Microsoft Lync Enterprise - Private Cloud", 
    "tenant": "Customer 1" 
},{ 
    "sku": "S-MLX-CHG-001", 
    "description": "Changes level Business - for Global Desktop Bundel", 
    "tenant": "Customer 1" 
}, { 
    "sku": "S-MLX-GLD-003", 
    "description": "Global Desktop Business Bundel - Performance - Private Cloud", 
    "tenant": "Customer 1" 
}, { 
    "sku": "S-MLX-GLD-012", 
    "description": "Global Desktop Foundation - Standard - Private Cloud", 
    "tenant": "Customer 1" 
},{ 
    "sku": "S-MLX-OFF-001", 
    "description": "Microsoft Office Standard - Private Cloud", 
    "tenant": "Customer 1" 
}, { 
    "sku": "S-MLX-LOB-824", 
    "description": "Exact Financials (CL) - Private Cloud", 
    "tenant": "Customer 1" 
}, { 
    "sku": "S-MLX-MCA-007", 
    "description": "Microsoft Lync Enterprise - Private Cloud", 
    "tenant": "Customer 2" 
},{ 
    "sku": "S-MLX-SEC-002", 
    "description": "Intrusion Prevention", 
    "tenant": "Customer 2" 
}, { 
    "sku": "S-MLX-SEC-004", 
    "description": "Local privacy compliance", 
    "tenant": "Customer 2" 
}, { 
    "sku": "S-MLX-S02-100", 
    "description": "Location based Access", 
    "tenant": "Customer 2" 
},{ 
    "sku": "S-MLX-SEC-002", 
    "description": "Intrusion Prevention", 
    "tenant": "Customer 2" 
}, { 
    "sku": "S-MLX-S02-510", 
    "description": "Two factor authentication - Hard Token Security", 
    "tenant": "Customer 2" 
}, { 
    "sku": "S-MLX-MCA-007", 
    "description": "Microsoft Lync Enterprise - Private Cloud", 
    "tenant": "Customer 2" 
},{ 
    "sku": "S-MLX-CHG-001", 
    "description": "Changes level Business - for Global Desktop Bundel", 
    "tenant": "Customer 2" 
}, { 
    "sku": "S-MLX-GLD-003", 
    "description": "Global Desktop Business Bundel - Performance - Private Cloud", 
    "tenant": "Customer 2" 
}, { 
    "sku": "S-MLX-GLD-012", 
    "description": "Global Desktop Foundation - Standard - Private Cloud", 
    "tenant": "Customer 2" 
},{ 
    "sku": "S-MLX-OFF-001", 
    "description": "Microsoft Office Standard - Private Cloud", 
    "tenant": "Customer 2" 
}, { 
    "sku": "S-MLX-LOB-824", 
    "description": "Exact Financials (CL) - Private Cloud", 
    "tenant": "Customer 2" 
}]

Plunkr https://embed.plnkr.co/hfB75e6w9sYZzDkwyh24/

источник

2017-02-10 Frank

вы можете добавить его в plunker или какого-нибудь редактора? Так что его легко отлаживать? – Indhu

уверен, позвольте мне проверить, как это работает :) Я вернусь к вам – Frank

https://embed.plnkr.co/hfB75e6w9sYZzDkwyh24/ это достаточно? не уверены, можете ли вы редактировать это? – Frank

вы просто измените следующий код

<select> 
    <option ng-model="dropdownString" ng-repeat="client in products | unique:'tenant'">{{client.tenant}}</option> 
    </select>

<select ng-model="dropdownString" > 
    <option ng-repeat="client in products | unique:'tenant'">{{client.tenant}}</option> 
    </select>

Я не уверен, что это сработает или нет. вот как я исправить вашу проблему. Мой код приведен ниже:

HTML

<input type="text" class="search" ng-model="searchx.sku" placeholder="Enter your search terms" /> 


<select ng-model="searchx.tenant"> 
    <option ng-repeat="client in products | unique:'tenant'">{{client.tenant}}</option> 
</select> 

<div class="tab-content"> 
    <ul class="media-list tab-pane fade in active"> 
     <div class="row row-content"> 
      <div class="col-xs-12"> 
       <ul class="media-list"> 
         <li class="media"> 
          <div class="media-left media-middle"> 
          </div> 
          <div class="media-body"> 
           <table> 
            <tr> 
             <th class="table-1">Product description</th> 
             <th>SKU</th> 
             <th>Tenant</th> 
             <th>Select</th> 
            </tr> 
            <tr ng-repeat="product in products | filter: searchx"> 
             <td>{{product.description}}</td> 
             <td>{{product.sku}}</td> 
             <td>{{product.tenant}}</td> 
             <td><input type="checkbox"></td> 
            </tr> 
           </table> 
          </div> 
         </li> 
        </ul> 
     </ul> 
     </div>

Angular.js

var app = angular.module('productBackend', []); 

app.controller('menuController', function ($scope, $http) { 

     $scope.searchx = {}; 

     $scope.search=[]; 
     $http.get('./products.json') 
      .then(function (res) { 
       $scope.products = res.data; 
      }); 
}); 


app.filter('unique', function() { 
     // same code 
}); 

app.controller('ExampleController', ['$scope', function($scope) { 
    // same code 
}]);

источник

2017-02-10 15:19:30 sabbir

Большое спасибо! заработал! – Frank

фильтр по выбранному элементу в выпадающем списке

ответ

Смежные вопросы