CODEWITHSUNDEEP
javascriptangularjs
Abdul Jalil Marwat
Abdul Jalil Marwat

Reputation: 91

How to bind Module+Controller data with view in Angular Js

Module and Controller Code:

    Search.js
/// <reference path="angular.min.js" />

var app = angular.module("module1", []).controller("controller1", function ($scope) {
    var employees = [

        { name: "Arsalan", dateOfBirthe: new Date("Nov 23,1998"), gender: "Male", salary: "99939339.2345" },
        { name: "Kamran", dateOfBirthe: new Date("Dec 01,2000"), gender: "FeMale", salary: "99939339" },
        { name: "Arshad", dateOfBirthe: new Date("May 23,1999"), gender: "Male", salary: "99939339" },
        { name: "Jrsaloon", dateOfBirthe: new Date("Jan 01,2016"), gender: "Male", salary: "99939339.2345" }
    ];
    $scope.employees = employees;
});

Here is the View Code from Search.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/search.js"></script>
    <script src="Scripts/angular.js"></script>
    <link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body ng-app="module1">
    <div ng-controller="controller1">
        Search : <input type="text" placeholder="Search Employees" ng-model="searchText.gender"/>
        <br/><br/>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Date Of Birth</th>
                    <th>Gender</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in employees | filter:searchText">
                    <td>{{employee.name}}</td>
                    <td>{{employee.dateOfBirthe}}</td>
                    <td>{{employee.gender}}</td>
                    <td>{{employee.salary}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Out-Put Screen:

Search.png

Description: My Module+Controller data is do not bind with view , any one help me that how i will recorretct my code that it do the work properly.............tnx

Upvotes: 0

Views: 122

Answers (1)

Tarun Dugar
Tarun Dugar

Reputation: 8971

Include search.js AFTER angular.js. Also, for using searchText, see Shyju's answer.

<script src="Scripts/angular.js"></script>
<script src="Scripts/search.js"></script>

Upvotes: 1

Related Questions