AngularJS обработка входного значения

Когда я начинаю вводить имя студента, например «м», в список студентов должны входить только студенты, имена которых начинаются на букву» М » и так далее по остальному слову. Но входное значение .длина все время не определена.

(function() {
  var app = angular.module('app', []);
  app.controller('DataController', function() {
    this.students = arr;
    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 arr= [{
    name: 'Azurite',
    price: 2.95
  }, {
    name: 'Bloodstone',
    price: 5.95
  }, {
    name: 'Zircon',
    price: 3.95
  }];
}());

HTML

<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>

1 ответ

  1. Угловой способ сделать это-использовать filterфункцию, встроенную в угловой.

    во-первых, текстовое поле, в которое вы хотите ввести поиск:

    <input class="col-md-12 col-xs-12" type="text" 
           placeholder="Search people by name..." ng-model='data.text'>
    

    Обратите внимание, что для этого нужно только ng-modelзначение.

    Далее, ng-repeat:

    <tbody ng-repeat='student in data.students | filter:data.text'>
    

    В контроллере вообще ничего не нужно.

    http://plnkr.co/edit/aoR2ZkrgjCvhC60Ky0QA?p=preview