Question

我有使用AngularJS搜索文本的代码。但是无法在表格中显示行并且搜索效果不佳。 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

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 有什么问题？

由于

Answer 1

你有几个问题： 1）你还没有包含ng-app（在jsfiddle中） 2）你在几个地方拼错了ng-model

以下是您在jsbin上运行的代码： http://jsbin.com/tahiwocuvu/edit?html,css,js,output

Answer 2

您需要做的就是拼写模型正确：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" />

Answer 3

您需要正确地包含ng-app标记（从小提琴中删除），可以从jsfiddle选项或代码中包含。为了使您的搜索有效，请使用ng-model的正确拼写。还记得在JavaScript选项中包含AngularJS。 Here是您代码的工作分支。

Answer 4

你拼错了ng-model（ng-modle）

<input type="text" placeholder="Search name" ng-model="searchText.name" />
<input type="text" placeholder="Search city" ng-model="searchText.city" />

Answer 5

你拼错了

<input type="text" placeholder="Search name" ng-model="searchText.name" />
<input type="text" placeholder="Search city" ng-model="searchText.city" />

使用AngularJS过滤和搜索

5 个答案: