使用AngularJS过滤和搜索
[英]Filter and search using AngularJS
问题描述
I have code using AngularJS for search text. 
我有使用AngularJS搜索文本的代码。 But can't display rows in the table and search is not working well. 但是无法在表格中显示行并且搜索效果不佳。 HTML HTML
<html ng-app="myModule">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="Scripts/angular.js" type="text/javascript"></script>
<script src="Scripts/Script.js" type="text/javascript"></script>
<link href="Styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div ng-controller="myController">
<input type="text" placeholder="Search name" ng-modle="searchText.name" />
<input type="text" placeholder="Search city" ng-modle="searchText.city" />
<input type="checkbox" ng-model="exactMatch" /> Exact match
<br /> <br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | filter:searchText:exactMatch">
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
<td>{{employee.city}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Javascript 使用Javascript
var myApp = angular.module("myModule",[])
.controller("myController", function ($scope){
var employees = [
{name:"Ben", gender:"Male", salary:55500.00, city:"London"},
{name:"Thomas", gender:"Male", salary:56000.00, city:"Melbourne"},
{name:"Lin", gender:"Male", salary:78000.00, city:"Texas"},
{name:"Ben", gender:"Male", salary:85000.00, city:"Sydney"},
{name:"Ben", gender:"Male", salary:44000.00, city:"Singapore"}
];
$scope.employees = employees;
});
jsfiddle What are wrong? jsfiddle有什么问题？
Thanks 谢谢
5 个解决方案
解决方案1
5 已采纳 2016-10-14 04:00:25
You have a couple issues: 1) You've not included ng-app (in the jsfiddle) 2) You've misspelled ng-model in a couple places 你有几个问题：1）你没有包含ng-app（在jsfiddle中）2）你在几个地方拼错了ng-model
Here is your code working on jsbin: http://jsbin.com/tahiwocuvu/edit?html,css,js,output 以下是您在jsbin上运行的代码： http ：//jsbin.com/tahiwocuvu/edit？html，css，js，output
解决方案2
4 2016-10-14 04:00:41
All you need to do is spell model correctly: http://jsfiddle.net/Lvc0u55v/10785/ 你需要做的就是拼写模型正确： http ： //jsfiddle.net/Lvc0u55v/10785/
<input type="text" placeholder="Search name" ng-model="searchText.name" />
<input type="text" placeholder="Search city" ng-model="searchText.city" />
解决方案3
4 2016-10-14 04:06:27
You need to include the ng-app tag correctly (missing from your fiddle), either from the jsfiddle options or in your code. 您需要正确地包含ng-app标签（从小提琴中丢失），可以从jsfiddle选项或代码中包含。 In order to make your search working, use the correct spelling of ng-model . 为了使您的搜索工作，请使用ng-model的正确拼写。 Also remember to include AngularJS in your fiddle from the JavaScript options. 还记得在JavaScript选项中包含AngularJS。 Here is a working fork of your code. 这是代码的工作分支。
解决方案4
3 2016-10-14 04:11:43
You misspelled the ng-model(ng-modle) 你拼错了ng-model（ng-modle）
<input type="text" placeholder="Search name" ng-model="searchText.name" />
<input type="text" placeholder="Search city" ng-model="searchText.city" />
解决方案5
3 2016-10-21 12:30:31
You are misspelled 你拼错了
<input type="text" placeholder="Search name" ng-model="searchText.name" />
<input type="text" placeholder="Search city" ng-model="searchText.city" />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.