点击数据AngularJS后过滤表格

时间：2017-08-30 07:52:18

标签： javascript angularjs filter

我需要过滤表格 - 点击列表中的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>

提前感谢您的回答！

3 个答案:

答案 0 :(得分：1)

替换此行

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

带

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

您缺少name

的search属性

＆＃13;
＆＃13; 
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"
                
        ];
     
    
     

     
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

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

其他问题是将ng-model绑定到li标记。你不能这样做。所以我只需使用ng-click设置search过滤器变量，并在li上使用clicke。

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

答案 2 :(得分：1)

您可以使用ng-click anchor上的li标记使用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>

相关问题
最新问题