Fatal编程技术网
  • angularjs/
  • 显示Json数组中表行内的数据-AngularJs

显示Json数组中表行内的数据-AngularJs

angularjs twitter-bootstrap-3

显示Json数组中表行内的数据-AngularJs,angularjs,twitter-bootstrap-3,Angularjs,Twitter Bootstrap 3,我是AngularJs的新手，创建了一个表。每一行都从控制器内声明的JsonArray读取数据。但是，行是空的 代码如下所示： 事实及；数字 名称 出生日期 性别 薪水 {{employee.name} {{employee.dateOfBirth}日期：“dd/MM/yyyy”} {{employee.gender} {{employee.salary}编号：2} var app=angular.module（'filterApp'，[]）； 应用程序模块（'tableController'

我是AngularJs的新手，创建了一个表。每一行都从控制器内声明的JsonArray读取数据。但是，行是空的

代码如下所示：


事实及；数字
名称
出生日期
性别
薪水
{{employee.name}
{{employee.dateOfBirth}日期：“dd/MM/yyyy”}
{{employee.gender}
{{employee.salary}编号：2}
var app=angular.module（'filterApp'，[]）；
应用程序模块（'tableController'，函数（）{
var雇员=[
{
姓名：“本”，出生日期：新日期（“1980年11月23日”），
性别：“男性”，工资：55000.788
},
{
姓名：“Sara”，出生日期：新日期（“1970年5月5日”），
性别：“女性”，工资：68000
},
{
姓名：“马克”，出生日期：新日期（“1974年8月15日”），
性别：“男性”，工资：57000
},
{
姓名：“Pam”，出生日期：新日期（“1979年10月27日”），
性别：“女性”，工资：53000
},
{
姓名：“托德”，出生日期：新日期（“1983年12月30日”），
性别：“男性”，工资：60000
}
];
这是。雇员=雇员；
});

怎么了

谢谢

Theo.

首先，您应该声明Angular framework可以识别
ng app
。让我举一个例子：

<!doctype html>
<html ng-app="yourApp">
    <head>
        <link href="Content/bootstrap.css" rel="stylesheet"/>
        <link href="Content/animations.css" rel="stylesheet" />
        <title>Mockup application:). You can do what you want.:)</title>              
    </head>
    <body >  

        <div ng-view></div>  



        <script src="scripts/angular.js"></script>
        <script src="scripts/angular-route.js"></script> 
        <script src="scripts/angular-ui-bootstrap.js"></script>  
        <script src="app/app.js"></script>
        <script src="app/controllers/tableController.js"> </script>        
    </body>
</html>
首先，您应该声明
ngapp
由AngularFramework识别。让我举一个例子：

<!doctype html>
<html ng-app="yourApp">
    <head>
        <link href="Content/bootstrap.css" rel="stylesheet"/>
        <link href="Content/animations.css" rel="stylesheet" />
        <title>Mockup application:). You can do what you want.:)</title>              
    </head>
    <body >  

        <div ng-view></div>  



        <script src="scripts/angular.js"></script>
        <script src="scripts/angular-route.js"></script> 
        <script src="scripts/angular-ui-bootstrap.js"></script>  
        <script src="app/app.js"></script>
        <script src="app/controllers/tableController.js"> </script>        
    </body>
</html>
你在这里犯了两个错误

1，您正在定义
cotroller
但使用
app.module（'tableController'，function（）{
，因此将其更改为
app.controller（'tableController'，function（）{
）

2、将视图中的控制器定义为
as
，即
tableController为ctrl

试试这个


事实及数字
名称
出生日期
性别
薪水
{{employee.name}
{{employee.dateOfBirth}日期：“dd/MM/yyyy”}
{{employee.gender}
{{employee.salary}编号：2}
var app=angular.module（'filterApp'，[]）；
app.controller（'tableController'，function（）{
var雇员=[
{
姓名：“本”，出生日期：新日期（“1980年11月23日”），
性别：“男性”，工资：55000.788
},
{
姓名：“Sara”，出生日期：新日期（“1970年5月5日”），
性别：“女性”，工资：68000
},
{
姓名：“马克”，出生日期：新日期（“1974年8月15日”），
性别：“男性”，工资：57000
},
{
姓名：“Pam”，出生日期：新日期（“1979年10月27日”），
性别：“女性”，工资：53000
},
{
姓名：“托德”，出生日期：新日期（“1983年12月30日”），
性别：“男性”，工资：60000
}
];
这是。雇员=雇员；
});
您在这里犯了两个错误

1，您正在定义
cotroller
但使用
app.module（'tableController'，function（）{
，因此将其更改为
app.controller（'tableController'，function（）{
）

2、将视图中的控制器定义为
as
，即
tableController为ctrl

试试这个


事实及数字
名称
出生日期
性别
薪水
{{employee.name}
{{employee.dateOfBirth}日期：“dd/MM/yyyy”}
{{employee.gender}
{{employee.salary}编号：2}
var app=angular.module（'filterApp'，[]）；
app.controller（'tableController'，function（）{
var雇员=[
{
姓名：“本”，出生日期：新日期（“1980年11月23日”），
性别：“男性”，工资：55000.788
},
{
姓名：“Sara”，出生日期：新日期（“1970年5月5日”），
性别：“女性”，工资：68000
},
{
姓名：“马克”，出生日期：新日期（“1974年8月15日”），
性别：“男性”，工资：57000
},
{
姓名：“Pam”，出生日期：新日期（“1979年10月27日”），
性别：“女性”，工资：53000
},
{
姓名：“托德”，出生日期：新日期（“1983年12月30日”），
性别：“男性”，工资：60000
}
];
这是。雇员=雇员；
});
我修复了您代码中的某些内容。现在它可以正常工作了。 不要忘记ng应用程序以及如何在应用程序中添加控制器。如果您有问题，请提问

var-app=angular.module（'filterApp'，[]）；
app.controller（'tableController'，function（）{
var雇员=[{
姓名：“本”，
出生日期：新日期（“1980年11月23日”），
性别：“男性”，

(function()
{         
    var tableController=function($scope) { 
                 $scope.employees= [];

                 function init() {                        
                    $scope.employees=[
            {
                name: "Ben", dateOfBirth: new Date("November 23, 1980"),
                gender: "Male", salary: 55000.788
            },
            {
                name: "Sara", dateOfBirth: new Date("May 05, 1970"),
                gender: "Female", salary: 68000
            },
            {
                name: "Mark", dateOfBirth: new Date("August 15, 1974"),
                gender: "Male", salary: 57000
            },
            {
                name: "Pam", dateOfBirth: new Date("October 27, 1979"),
                gender: "Female", salary: 53000
            },
            {
                name: "Todd", dateOfBirth: new Date("December 30, 1983"),
                gender: "Male", salary: 60000
            }
        ];
                 }

                 init();            
             };    


    tableController.$inject=['$scope'];   

    angular.module('yourApp').controller('tableController', tableController);        
}());