Angular JS как фильтровать по переменной JSON - PullRequest
Новая
       6

Angular JS как фильтровать по переменной JSON

0 голосов
/ 18 мая 2018

index.html

enter image description here test.json

enter image description here Я хочу, чтобы пользователь мог динамически фильтровать, нажимая кнопку, представляющую конкретный номер телефона, который они хотели бы видеть, вместо использования «filter: {Name: 'Bob'}», показывающего только информацию о Бобсе, но я не смогнайти способ использовать переменную вместо «Боб».Я предоставил код в изображениях.

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

Плункер был прав в том, как я использую переменную в своем фильтре, я просто сделал то, что сказал Shb в комментариях, так что мои кнопки были вне области видимости, и я просто настроил теги ng-app и ng-controller для телаи решение Punkers для фильтра работает.Спасибо, ребята, что-то, что я должен был легко увидеть. 

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
  <script src="script.js"></script>
  <script>
    var app = angular.module('DB', []);
    app.controller('controller', function($scope) {
      $scope.db = [{
        "Name": "Bob",
        Phones: ["555-555-5555", "555-556-5556"]
      }, {
        "Name": "Jim",
        Phones: ["555-555-5554"]
      }];

      $scope.filterName = 'Bob';

    });
  </script>
</head>

<body ng-app="DB" ng-controller="controller">
  <button ng-click="filterName='Bob'">Bob</button>
  <button ng-click="filterName='Jim'">Jim</button>
  <ul>
    <li ng-repeat="phones in db | filter: {Name: filterName}">
      {{phones.Phones}}
    </li>
  </ul>
</body>

</html>
0 голосов
/ 18 мая 2018

Попробуйте следующий код 

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
  <script src="script.js"></script>
  <script>
    var app = angular.module('DB', []);
    app.controller('controller', function($scope) {
      $scope.db = [{
        "Name": "Bob",
        Phones: ["555-555-5555", "555-556-5556"]
      }, {
        "Name": "Jim",
        Phones: ["555-555-5554"]
      }];

      $scope.filterName = 'Bob';

    });
  </script>
</head>

<body ng-app="DB" ng-controller="controller">
  <button ng-click="filterName='Bob'">Bob</button>
  <button ng-click="filterName='Jim'">Jim</button>
  <ul>
    <li ng-repeat="phones in db | filter: {Name: filterName}">
      {{phones.Phones}}
    </li>
  </ul>
</body>

</html>

Плункер

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

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

...