如何将模块+控制器数据与Angular Js中的视图绑定

时间:2015-12-12 15:34:33

标签: javascript angularjs

模块和控制器代码:

    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;
});

以下是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>

输出屏幕:

Search.png

描述:我的模块+控制器数据不与视图绑定,              任何人都帮助我,我将如何记录我的代码              做好工作............. tnx

1 个答案:

答案 0 :(得分:1)

在angular.js之后加入search.js。另外,对于使用searchText,请参阅Shyju的回答。

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