使用angularjs对特定的两个字段进行ng-repeat搜索?

时间:2015-08-31 12:31:02

标签: javascript jquery angularjs

这里我附上了我的小提琴。小提琴包含学生列表和一个搜索框就在那里。我想在这两个字段(Center_name,Address)中仅基于搜索的Center_name和Address.user输入匹配。例如用户输入的G(g)我需要检查中心名称或地址是否匹配我需要显示详细信息。请帮助我如何使用此Center_name和地址进行搜索。如果没有匹配我需要显示没有找到的结果您的搜索 http://jsfiddle.net/U3pVM/18286/



angular.module('myApp', [])
    .controller("myCntrl", function ($scope) {

    var data = [{

        Name: "Ashok",
        Center_name:"Global Idea Solutions",
		Address:"Majestic, Bangalore",
        Ext_courses: "Java,Php",
        Subjects: "Tamil,English,Maths,Science,Commerce",
        Email: "ashok@gmail.com",
    }, {
        Name: "Sekar",
        Center_name:"VIT Software Training Institute",
		Address:"BTM 3rd Stage, Bangalore",
        Ext_courses: "Java,Php",
        Subjects: "English,Science,Tamil",
        Email: "sekar@gmail.com",
    }, {
        Name: "Mohan",
        Center_name:"Techpark Computer Education",
		Address:"JP Nagar, Bangalore",
        Ext_courses: "Java",
        Subjects: "Maths,English,Tamil",
        Email: "mohan@gmail.com",
    }, {
        Name: "Ramesh",
        Center_name:"Vijay Software Training Institute",
		Address:"Banashankari 3rd stage, Bangalore",
        Ext_courses: "Php",
        Subjects: "Commerce,Computer",
        Email: "ramesh@gmail.com",
    }, {
        Name: "Suresh",
        Center_name:"Global Idea Solution",
		Address:"Banashankari 2nd stage, Bangalore",
        Ext_courses: "Php",
        Subjects: "Computer,Tamil",
        Email: "suresh@gmail.com",
    }, {
        Name: "Ajith",
        Center_name:"Global Idea Solution",
		Address:"JP Nagar 5th stage, Bangalore",
        Ext_courses: "Java",
        Subjects: "Tamil,Science",
        Email: "ajith@gmail.com",
    }

    ]

    var searchcourse = 'Java';
    var searchsubject = 'Computer,Commerce';
    //var searchsubject='Tamil,English';
    $scope.tests = [];
    for (var i = 0; i < data.length; i++) {
        var studentcourse = data[i].Ext_courses.split(',');
        var studentsubject = data[i].Subjects.split(',');
        for (var j = 0; j < studentcourse.length; j++) {
            for (var k = 0; k < studentsubject.length; k++) {
                if (studentcourse[j] === searchcourse || studentsubject[k] === searchsubject) {
                    if ($scope.tests.indexOf(data[i]) == -1){
                        $scope.tests.push(data[i]);
                    }
                }

            }

        }


    }


    console.log(data);
})
&#13;
<div ng-app="myApp">
  
    <div ng-controller="myCntrl">
             <label>List Of students</label><br>
			 <input ng-model="search" type="text" placeholder="find student" /><br><br><br><br><br>
            <div ng-repeat="test in tests | filter:search" style="border-radius:5px;background: #8AC007;padding: 20px;">
                {{test.Center_name}}  <br>
				 {{test.Address}}  <br>
                 {{test.Name}}  <br>
				 {{test.Email}} <br><br><br><br>
             </div>
    
        </div><BR><BR>
	</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

使用自定义功能进行搜索:

$scope.search = function (row) {
    var query = angular.lowercase($scope.query);
    return (angular.lowercase(row.brand).indexOf($scope.query || '') !== -1 || angular.lowercase(row.model).indexOf($scope.query || '') !== -1);
};

http://jsfiddle.net/dk6rejrL/2/

Filtering by Multiple Specific Model Properties in AngularJS (in OR relationship)

处获取战利品

答案 1 :(得分:0)

//creating the module ,controller and registering with the module all done in one line
//Use the method chaining mechnism as show below:
var myApp = angular.module('myModule', []).controller("myController",function($scope){
	var employees = [
			{
				firstname:"Pramod Kharade",
				city:"Baramati",
				gender:"Male",
				salary:45000
			},
			{
				firstname:"Ganesh Kadam",
				city:"Hanumanbet",
				gender:"Male",
				salary:65000
			},
			{
				firstname:"Malayka",
				city:"Pune",
				gender:"female",
				salary:50000
			}
		];
		
	$scope.employees = employees;
	$scope.search = function(item){
		if($scope.searchText == undefined){
			return true;
		}else{
			if(item.firstname.toLowerCase().indexOf($scope.searchText.toLowerCase()) !=-1 || item.city.toLowerCase().indexOf($scope.searchText.toLowerCase()) !=-1){
				return true;
			}
		}
		return false;
	}
	
});
table{
	border-collapse: collapse;
	font-family: Arial;
}
td{
	border: 1px solid black;
	padding: 5px;
}
th{
	border:1px solid black;
	padding: 5px;
	text-align: left;
}
.arrow-up{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid black;
display: inline-block;
}
.arrow-down{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid black;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title>Angularjs-Filter by multiple properties </title>
	
	<script type="text/javascript" src="script.js"></script>
	<link rel="stylesheet" href="style.css">
</head>
<body >
<p> How to filter by Multiple Properties?<br>
	Multiple Search textboxes.Each textbox searching a specific property<br>
  
</p>
<div ng-app="myModule">
	<div ng-controller="myController">
	<input type="text" placeholder="Search name & city" ng-model="searchText">
	<p>Search name & city in same searchbox</p>
	<br>
	<table border="1">
		<thead><tr><th >Name </th>
		<th>City</th>
		<th >Gender</th>
		<th >Salary</th>
		
		</tr></thead>
		<tbody>
			<tr ng-repeat="employee in employees | filter:search">
				<td>{{employee.firstname}}</td>
				<td>{{employee.city}}</td>
				<td>{{employee.gender}}</td>
				<td>{{employee.salary}}</td>
			</tr>

		</tbody>
	</table>
	
</div>

</div>

</body>
</html>