Невозможно прочитать свойство min из undefined в angularjs - PullRequest
Новая
       1

Невозможно прочитать свойство min из undefined в angularjs

0 голосов
/ 27 января 2019

Я новичок в angularjs.i, я пытаюсь создать простую страницу с помощью некоторого учебного пособия. Одна страница предназначена для ввода пользователем html, а другая - для JavaScript, если оператор else.неопределенный ".index.html 

<body ng-app="ngCribs" ng-controller="cribsController">
<div class="container">     
                <div class="row price-form-row" ng-if="!addListing">
                    <span class="input-group-addon">Min Price</span>
                    <select name="minPrice" id="minPrice" [ng-model]="priceInfo.min" class="form-control">
                      <option value="100000">$100,000</option>
                      <option value="200000">$200,000</option>
                      <option value="300000">$300,000</option>
              </select>
                  </div>          
                <span class="input-group-addon">Max Price</span>
                    <select name="maxPrice" id="maxPrice" ng-model="priceInfo.max" class="form-control">
                      <option value="100000">$100,000</option>
                      <option value="200000">$200,000</option>
                      <option value="300000">$300,000</option>
                     </select>
     <div class="container">
      <div class="col-sm-4" 
        ng-repeat="crib in cribs | cribsFilter:priceInfo | orderBy: '-id'">          
              <i class="glyphicon glyphicon-tag"></i> {{crib.price | currency}} <i class="glyphicon glyphicon-home"></i> {{crib.address}} 
                <span class="label label-primary label-sm">{{crib.type}}</span></div>             
 </body>
  <script src="app.js"></script>
  <script src="scripts/cribsFilter.js"></script>
</html>

cribsFiler.js 

angular
    .module('ngCribs')
    .filter('cribsFilter', function() {
    return function(listings, priceInfo) {
    var filtered = [];
    var min = priceInfo.min;
    var max = priceInfo.max;
     angular.forEach(listings, function(listing) {
      if(listing.price >= min && listing.price <= max) {
      filtered.push(listing);
                }
            });
       return filtered;
        }
    });

1 Ответ

0 голосов
/ 27 января 2019

Попробуйте с такими изменениями: 

ng-repeat="crib in cribs | cribsFilter:priceInfo.min:priceInfo.max | orderBy: '-id'"

и 

.module('ngCribs').filter('cribsFilter', function() {
        return function(listings, min, max) {
        var filtered = [];

Итак, код результата: 

<div class="container">     
            <div class="row price-form-row" ng-if="!addListing">
                <span class="input-group-addon">Min Price</span>
                <select name="minPrice" id="minPrice" [ng-model]="priceInfo.min" class="form-control">
                  <option value="100000">$100,000</option>
                  <option value="200000">$200,000</option>
                  <option value="300000">$300,000</option>
          </select>
              </div>          
            <span class="input-group-addon">Max Price</span>
                <select name="maxPrice" id="maxPrice" ng-model="priceInfo.max" class="form-control">
                  <option value="100000">$100,000</option>
                  <option value="200000">$200,000</option>
                  <option value="300000">$300,000</option>
                 </select>
 <div class="container">
  <div class="col-sm-4" 
    ng-repeat="crib in cribs | cribsFilter:priceInfo.min:priceInfo.max | orderBy: '-id'">          
  <i class="glyphicon glyphicon-tag"></i> {{crib.price | currency}} <i class="glyphicon glyphicon-home"></i> {{crib.address}} 
  <span class="label label-primary label-sm">{{crib.type}}</span></div>             
</div>
   </div>

JS: 

angular
    .module('ngCribs').filter('cribsFilter', function() {
    return function(listings, min, max) {
    var filtered = [];
     angular.forEach(listings, function(listing) {
      if(listing.price >= min && listing.price <= max) {
      filtered.push(listing);
                }
            });
       return filtered;
        }
    });

Теперь вы не должны получить сообщение об ошибке Plunker: http://run.plnkr.co/l5oe6uLyfP4fpPJA/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...