AngularJS 自动不起作用

debugcn 发表于 Dev

用户7969920

为了好玩，我正在用 AngularJS 编写一个客户端应用程序。在应用程序的一部分中，它应该在表格中显示所有申请人，自动从我的 JSON 数组中获取。但它不起作用。

这是我的代码：

//engine.js

(function(){
    angular
        .module("resumeBase", []);
})();

//controllers.js

(function(){
    angular
        .module("resumeBase")
        .controller("tabularList", listController);

        function listController() {
            var vm = this;
            vm.data = applicants;
        }

        var applicants = [
            {
                firstname: "Nima",
                lastname: "Bavari",
                evaluation: 5,
                category: "IT & Computers",
                fileLocation: "",
                empConfirmed: "found",
                confirmTime: "01-01-2017",
                employer: "EnDATA",
                payConfirmed: "yes"
            }
        ]
})();

<!DOCTYPE html>
<html ng-app="resumeBase">
    <head>
        <title>::Search Entries::</title>
        <link rel="stylesheet" type="text/css" href="style/main.css" />
    </head><body>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
        <script type="text/javascript" src="scripts/engine.js"></script>
        <script type="text/javascript" src="scripts/controllers.js"></script>
        <div id="container" ng-controller="tabularList">
            <hr />
            <table>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Evaluation</th>
                    <th>Category</th>
                    <th>Resume</th>
                    <th>Found Job?</th>
                    <th>Date and Time</th>
                    <th>Employer</th>
                    <th>Paid Us?</th>
                </tr>

                <tr ng-repeat="item in tabularList.data">
                    <td>{{item.firstname}}</td>
                    <td>{{item.lastname}}</td>
                    <td>{{item.evaluation}}</td>
                    <td>{{item.category}}</td>
                    <td><a ng-href="{{item.fileLocation}}" target="blank">{{item.fileLocation}}</a></td>
                    <td>{{item.empConfirmed}}</td>
                    <td>{{item.confirmTime}}</td>
                    <td>{{item.employer}}</td>
                    <td>{{item.payConfirmed}}</td>
                </tr>
            </table>
            [<a href="index.php">Add New Entry</a>]
        </div>
    </body>
</html>

您有什么推荐的吗？我的错误在哪里？

萨吉塔兰

您错过了controller as syntax，只需将您的 HTML 更改为，

  <div id="container" ng-controller="tabularList as vm">

还，

 <tr ng-repeat="item in vm.data">

演示

//engine.js

(function(){
    angular
        .module("resumeBase", []);
})();

//controllers.js

(function(){
    angular
        .module("resumeBase")
        .controller("tabularList", listController);

        function listController() {
            var vm = this;
            vm.data = applicants;
        }

        var applicants = [
            {
                firstname: "Nima",
                lastname: "Bavari",
                evaluation: 5,
                category: "IT & Computers",
                fileLocation: "",
                empConfirmed: "found",
                confirmTime: "01-01-2017",
                employer: "EnDATA",
                payConfirmed: "yes"
            }
        ]
})();

<!DOCTYPE html>
<html ng-app="resumeBase">
    <head>
        <title>::Search Entries::</title>
        <link rel="stylesheet" type="text/css" href="style/main.css" />
    </head><body>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
         <div id="container" ng-controller="tabularList as vm">
            <hr />
            <table>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Evaluation</th>
                    <th>Category</th>
                    <th>Resume</th>
                    <th>Found Job?</th>
                    <th>Date and Time</th>
                    <th>Employer</th>
                    <th>Paid Us?</th>
                </tr>

                <tr ng-repeat="item in vm.data">
                    <td>{{item.firstname}}</td>
                    <td>{{item.lastname}}</td>
                    <td>{{item.evaluation}}</td>
                    <td>{{item.category}}</td>
                    <td><a ng-href="{{item.fileLocation}}" target="blank">{{item.fileLocation}}</a></td>
                    <td>{{item.empConfirmed}}</td>
                    <td>{{item.confirmTime}}</td>
                    <td>{{item.employer}}</td>
                    <td>{{item.payConfirmed}}</td>
                </tr>
            </table>
            [<a href="index.php">Add New Entry</a>]
        </div>
    </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。