Question

的index.html

的 test.json

我希望能够通过用户点击按钮来动态过滤，该按钮会重新显示他们想要查看的特定电话号码，而不是使用＆＃34;过滤器：{姓名：＆＃39; Bob＆＃39;}＆＃34;仅显示Bobs信息但我无法找到使用变量代替Bob＆＃39;的方法。我在图片中提供了代码。

Answer 1

尝试以下代码

＆＃13;

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

＆＃13;

Plunker

Answer 2

Plunker在我的过滤器中如何使用变量是正确的，我只是做了Shb在评论中所说的，所以我的按钮超出了范围我只是将标签ng-app和ng-controller调整到了正文和Punkers解决过滤器的工作原理。谢谢大家我应该很容易看到的东西。

＆＃13;

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

＆＃13;

Angular JS如何按JSON变量进行过滤

2 个答案: