点击数据AngularJS后过滤表答案

【问题标题】：Filter table after click data AngularJS点击数据AngularJS后过滤表
【发布时间】：2017-08-30 07:52:18
【问题描述】：

我需要过滤表-点击列表中的name后：

 <ul ng-repeat="f in filter">
    <li ng-model="search.name">
        <a class="left-menu-link">
            {{f}}
        </a>
    </li>
</ul>

表格应该只列出我选择的那个名字。我的笨蛋：http://plnkr.co/edit/g1t4pludTTIAJYKTToCK?p=preview

// Code goes here

var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {

  $scope.data = [{
      "name": "afdfg Nixon",
      "system": "System Architect"
    },
    {
      "name": "sdfasdfas",
      "system": "System Architect"
    },
    {
      "name": "ggg Nigadfgxon",
      "system": "System Architect"
    },
    {
      "name": "Tiger sdd",
      "system": "System Architect"
    },
    {
      "name": "aaa Nixon",
      "system": "System Architect"
    }
  ];

  $scope.filter = [

    "afdfg Nixon",

    "sdfasdfas",

    "ggg Nigadfgxon",

    "Tiger sdd",

    "aaa Nixon"

  ];





});

<html ng-app="app" ng-cloak>

<head>
  <style>
    [ng\:cloak],
    [ng-cloak],
    [data-ng-cloak],
    [x-ng-cloak],
    .ng-cloak,
    .x-ng-cloak {
      display: none !important;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


  <script src="script.js"></script>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body ng-controller="FirstCtrl as vm">
  <ul ng-repeat="f in filter">
    <li ng-model="search.name">
      <a class="left-menu-link">
                            {{f}}
                        </a>
    </li>
  </ul>
  <input ng-model="search.name" />
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Name
          <th>System
          </th>

      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="n in data | filter:search">
        <td style="word-break:break-all;">{{n.name}}</td>

        <td>{{n.system}}</td>


      </tr>
    </tbody>
  </table>

</body>

</html>

提前感谢您的回答！

【问题讨论】：

检查我的答案。您无法访问您在 ng-model 中用于输入字段的搜索字段的名称属性。

标签： javascript angularjs filter

【解决方案1】：

您可以在li 中的anchor 标记上使用ng-click，使用ng-click=onClick(f)，如下所示：

$scope.onClick = function(name) {
    $scope.search = $scope.search || {};
    $scope.search.name = name;
}

见下面的演示和updated plunker:

var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {

  $scope.data = [{
      "name": "afdfg Nixon",
      "system": "System Architect"
    },
    {
      "name": "sdfasdfas",
      "system": "System Architect"
    },
    {
      "name": "ggg Nigadfgxon",
      "system": "System Architect"
    },
    {
      "name": "Tiger sdd",
      "system": "System Architect"
    },
    {
      "name": "aaa Nixon",
      "system": "System Architect"
    }
  ];

  $scope.filter = [

    "afdfg Nixon",

    "sdfasdfas",

    "ggg Nigadfgxon",

    "Tiger sdd",

    "aaa Nixon"

  ];

  $scope.onClick = function(name) {
    $scope.search = $scope.search || {};
    $scope.search.name = name;
  }
});

<html ng-app="app" ng-cloak>
<head>
  <style>
    [ng\:cloak],
    [ng-cloak],
    [data-ng-cloak],
    [x-ng-cloak],
    .ng-cloak,
    .x-ng-cloak {
      display: none !important;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-controller="FirstCtrl as vm">
  <ul ng-repeat="f in filter">
    <li>
      <a href="#" class="left-menu-link" ng-click=onClick(f)>{{f}}</a>
    </li>
  </ul>
  <input ng-model="search.name" />
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Name
          <th>System
          </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="n in data | filter:search">
        <td style="word-break:break-all;">{{n.name}}</td>
        <td>{{n.system}}</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

【讨论】：

【解决方案2】：

替换这一行

<tr ng-repeat="n in data | filter:search">

与

<tr ng-repeat="n in data | filter:search.name">

您缺少search 的name 属性

var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {
  
    $scope.data=[
            {
                "name" : "afdfg Nixon",
                "system" : "System Architect"
            },
            {
                "name" : "sdfasdfas",
                "system" : "System Architect"
            },
            {
                "name" : "ggg Nigadfgxon",
                "system" : "System Architect"
            },
            {
                "name" : "Tiger sdd",
                "system" : "System Architect"
            },
            {
                "name" : "aaa Nixon",
                "system" : "System Architect"
            }
        ];
        
        $scope.filter=[
           
                 "afdfg Nixon",
              
                 "sdfasdfas",
           
                 "ggg Nigadfgxon",
           
                 "Tiger sdd",
        
                 "aaa Nixon"
                
        ];
     
    
     

     
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="FirstCtrl as vm">
  <ul ng-repeat="f in filter">
                    <li ng-model="search.name">
                        <a class="left-menu-link">
                            {{f}}
                        </a>
                    </li>
                </ul>
  <input ng-model="search.name" />
   <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th >Name
                            <th >System
                            </th>
                        
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="n in data | filter:search.name">
                            <td style ="word-break:break-all;">{{n.name}}</td>
                      
                            <td>{{n.system}}</td>
                          
                
                        </tr>
                        </tbody>
                    </table>
                  
</body>

【讨论】：

【解决方案3】：

您在视图中使用了controlerAs 语法，但在控制器中没有使用this 变量。所以首先在控制器中使用this 而不是$scope。

其他问题是将ng-model 绑定到li 标签。你不能这样做。所以我只是使用ng-click 来设置search 过滤器变量并点击li。

// Code goes here

var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {

  var vm = this;
  vm.data = [{
      "name": "afdfg Nixon",
      "system": "System Architect"
    },
    {
      "name": "sdfasdfas",
      "system": "System Architect"
    },
    {
      "name": "ggg Nigadfgxon",
      "system": "System Architect"
    },
    {
      "name": "Tiger sdd",
      "system": "System Architect"
    },
    {
      "name": "aaa Nixon",
      "system": "System Architect"
    }
  ];

  vm.filter = [

    "afdfg Nixon",

    "sdfasdfas",

    "ggg Nigadfgxon",

    "Tiger sdd",

    "aaa Nixon"

  ];





});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="FirstCtrl as vm">
  <ul ng-repeat="f in vm.filter">
    <li ng-click="vm.search = f">
      <a class="left-menu-link">
                            {{f}}
                        </a>
    </li>
  </ul>
  <input ng-model="vm.search.name" />
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Name
          <th>System
          </th>

      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="n in vm.data | filter:vm.search">
        <td style="word-break:break-all;">{{n.name}}</td>

        <td>{{n.system}}</td>


      </tr>
    </tbody>
  </table>

</div>

【讨论】：