代码之家 › 专栏 › 技术社区 › bafix2203

点击数据角度后过滤表

filter angularjs javascript

bafix2203 · 技术社区 · 9 年前

name

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

该表应该只列出我选择的名称。我的plunker: 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 回复 | 直到 9 年前

kukkuz 9 年前

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>

Ankit Agarwal 9 年前

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

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

你错过了 name search

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>

Hadi Jeddizahed 9 年前

controlerAs this 变量所以首先使用 这 而不是 $scope 在控制器中。

ng-model li 标签你不能这样做。所以我只是用 ng-click search 单击打开时过滤变量 锂

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