javascript - Filter and search using AngularJS

I have code using AngularJS for search text. But can't display rows in the table and search is not working well. 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 What are wrong?

Thanks

I have code using AngularJS for search text. But can't display rows in the table and search is not working well. 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 What are wrong?

Thanks

Share Improve this question asked Oct 14, 2016 at 3:37 batuman 7,32432 gold badges117 silver badges248 bronze badges

Please show what results you're getting and what you're expecting. – Soviut Commented Oct 14, 2016 at 3:42

Add a ment |

5 Answers 5

Sorted by: Reset to default 5

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

Here is your code working on jsbin: http://jsbin./tahiwocuvu/edit?html,css,js,output

All you need to do is spell model correctly: http://jsfiddle/Lvc0u55v/10785/

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

You need to include the ng-app tag correctly (missing from your fiddle), either from the jsfiddle options or in your code. In order to make your search working, use the correct spelling of ng-model. Also remember to include AngularJS in your fiddle from the JavaScript options. Here is a working fork of your code.

You misspelled the ng-model(ng-modle)

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

You are misspelled

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Filter and search using AngularJS - Stack Overflow

5 Answers 5

与本文相关的文章