如何从angularjs的文本框中过滤数据 [英] how to filter the data from text box in angularjs

查看:353
本文介绍了如何从angularjs的文本框中过滤数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

**我正在过滤文本框中的数组数据,但是代码无法正常工作,请任何人帮我.来自后端的数据

**Hi,i am filtering the array data from textbox but the code is not working properly can any one help me please.the data from back end

 self.AdminLineDetails = function(data) {
   $scope.details = [];
   $scope.details = data.GoalData;
   console.log(data);
 }

<div class="row">
  <div class="col-md-12">
    <input ng-model="query" type="text" class="form-control" placeholder="Filter by name or number">
  </div>
  <div>
    <tbody>
      <tr ng-repeat="detail in details|filter:query">
        <td><a href="#">{{detail.firstName}}</a>
        </td>
        <td><a href="#">{{detail.lastName}}</a>
        </td>
        <td><a href="#">{{detail.mdn}}</a>
        </td>
      </tr>

    </tbody>
  </div>

**

推荐答案

<input type="text" ng-model="search">
<ul ng-repeat="oneauth in authorisations[0]">
    <li ng-repeat="entry in oneauth | nameFilter:search">{{entry.auth.name}}</li>
</ul>

JS

var app = angular.module('myapp', [], function () {});

app.controller('AppController', function ($scope) {    
    $scope.authorisations = [{
        "authorisations":[
        {
            "auth":{
                "number":"453",
                "name":"Apple Inc."
            }
        },
        {
            "auth":{
                "number":"123",
                "name":"Microsoft Inc."
             }
        }]
    }];
});

app.filter('nameFilter', function(){
    return function(objects, criteria){
        var filterResult = new Array();
        if(!criteria)
            return objects;

        for(index in objects) {
            if(objects[index].auth.name.indexOf(criteria) != -1) // filter by name only
                filterResult.push(objects[index]);
        }
        console.log(filterResult);
        return filterResult;  
    }    
});

检查此样本

http://jsfiddle.net/yctchgnk/

这篇关于如何从angularjs的文本框中过滤数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆