AngularJs обработка input

363

19 января 2017, 06:03

Здравствуйте.

Передо мной стоит задача отсеивать студентов с именами, которые не подходят тому, что я ввожу в input. Т.е. если я начинаю вводить имя на букву "В", то все "Алексеи" отсеиваются и т.д. Когда я начинаю вводить имя в input, то вылазит ошибка, мол .length переменной text (куда записываются всё из input) undefined. И дальше по мере ввода ничего не меняется и не работает. Подскажите в чём проблема?

(function() { 
  var app = angular.module('app', []); 
  app.controller('DataController', function() { 
    this.students = gems; 
    this.compare = function() { 
      for (var i = 0; i < this.text.length; i++) { 
        if (this.text[i] == this.students.name[i]) { 
          alert(this.text); 
          return true; 
        } 
      } 
    } 
  }); 
  var gems = [{ 
    name: 'Azurite', 
    price: 2.95 
  }, { 
    name: 'Bloodstone', 
    price: 5.95 
  }, { 
    name: 'Zircon', 
    price: 3.95 
  }]; 
}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div class="container-fluid"> 
  <div class="row-fluid"> 
    <input class="col-md-12 col-xs-12" type="text" placeholder="Search people by name..." ng-model='text' ng-change='data.students.name'> 
    <div class="buttons"> 
      <button class="btn btn-sort">Sort by name</button> 
      <button class="btn btn-sort">Sort by age</button> 
      <button ng-click='data.click()' class="btn btn-danger">Reset</button> 
    </div> 
  </div> 
 
  <!--Main content--> 
  <div class="main-table col-sm-8  col-md-7 col-md-offset-1 col-lg-7 col-lg-offset-1"> 
    <table class="table table-hover"> 
      <thead> 
        <tr> 
          <th class="text-center">Image</th> 
          <th>Name</th> 
          <th>Age</th> 
          <th>Phone</th> 
        </tr> 
      </thead> 
      <tbody ng-repeat='student in data.students' ng-show='data.compare()'> 
        <tr> 
          <td> 
            <img src="/img/cat.svg" alt=""> 
          </td> 
          <td>{{student.name}}</td> 
          <td>41</td> 
          <td>sieg@example.com</td> 
        </tr> 
      </tbody> 
    </table> 
  </div> 
</div>

Answer 1

Предлагаю своё решение на чистом JavaScript:

var input = document.getElementById('name'); 
 
input.onkeyup = function() { 
  var tr = document.querySelectorAll('.table tbody tr'); 
  for(var i = 0; i < tr.length; i++){ 
    // Создаём регулярное выражение: строка должна начинаться со значения указанного в input 
    var regexp = new RegExp('^'+this.value.toLowerCase()+'.*$', 'i'); 
    // Проверяем, начинается ли она со значения указанного в input 
    if(regexp.exec(tr[i].getElementsByTagName('td')[1].innerHTML.toLowerCase())){ // toLowerCase() нежно, что бы воспринимало любой регистр 
      tr[i].style.display = 'table-row'; // Показываем соответствующие строки 
    }else{ 
      tr[i].style.display = 'none'; // Скрываем строки, которые не подходят 
    }; 
  }; 
};

<table class="table table-hover"> 
  <thead> 
    <tr> 
      <th class="text-center">Image</th> 
      <th>Name</th> 
      <th>Age</th> 
      <th>Phone</th> 
    </tr> 
  </thead> 
  <tbody ng-repeat='student in data.students' ng-show='data.compare()'> 
    <tr> 
      <td> 
        <img src="https://i.stack.imgur.com/WZsJn.jpg?s=32&g=1" alt=""> 
      </td> 
      <td>Юрий</td> 
      <td>17</td> 
      <td>yurka_mail@ukr.net</td> 
    </tr> 
    <tr> 
      <td> 
        <img src="https://www.gravatar.com/avatar/6a2ebc4c3e8238a0f205e9cf32e4fb92?s=32&d=identicon&r=PG&f=1" alt=""> 
      </td> 
      <td>Александр</td> 
      <td>25</td> 
      <td>sieg@example.com</td> 
    </tr> 
    <tr> 
      <td> 
        <img src="https://www.gravatar.com/avatar/8ae54a5fe67401eabebeff0a86d82dba?s=32&d=identicon&r=PG&f=1" alt=""> 
      </td> 
      <td>Иван</td> 
      <td>12</td> 
      <td>sieg@example.com</td> 
    </tr> 
    <tr> 
      <td> 
        <img src="https://www.gravatar.com/avatar/026c32d1335230193ba501286b809d5c?s=32&d=identicon&r=PG&f=1" alt=""> 
      </td> 
      <td>Василий</td> 
      <td>37</td> 
      <td>sieg@example.com</td> 
    </tr> 
    <tr> 
      <td> 
        <img src="https://www.gravatar.com/avatar/2a246ffd14ebccdbee907e96647eee52?s=32&d=identicon&r=PG&f=1" alt=""> 
      </td> 
      <td>Виктор</td> 
      <td>14</td> 
      <td>sieg@example.com</td> 
    </tr> 
  </tbody> 
</table> 
 
<p> 
  <div>Введите имя:</div> 
  <input type="text" id="name"> 
</p>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Почему не отображается сразу DateTimePicker?

Почему не отображается сразу календарь в плагине datetimepicker? Сайт плагина, вариант Inline DateTimePicker отображается сразу, у меня на сайте пока не нажмешь...

291

javascript

Как mysql сконнектить с web приложением?

Есть сайт на хостинге PHP+Mysql+JS, решил создать к нему web приложение в PhoneGap и тут же наткнулся на проблемуНе могу понять, как вся необходимая инфа...

319

javascript

CreateProcess failed with error 2

В Webstorm 20163

437

javascript

функция проверки позиции скролла

Есть функция с помощью которой можно проверить "проскроллен ли скролл сайта до видимости определенного объекта":

377