Angularjs Angular未绑定数据_Angularjs_Visual Studio

Angularjs Angular未绑定数据

angularjs visual-studio

Angularjs Angular未绑定数据,angularjs,visual-studio,Angularjs,Visual Studio,这是我的index.html和safeCtrl.js控制器。我正在尝试使用angularJS实现angular智能表：[ 添加随机项名字姓出生日期平衡 {{row.firstName} {{row.lastName} {{row.birthDate}} {{row.balance}} app.controller（'safeCtrl'，['$scope'，函数（$scope）{ var firstnames=['Laurent'，'Blandine'，'Olivier'，'Max']；

这是我的index.html和safeCtrl.js控制器。我正在尝试使用angularJS实现angular智能表：[


添加随机项
名字
姓
出生日期
平衡
{{row.firstName}
{{row.lastName}
{{row.birthDate}}
{{row.balance}}
app.controller（'safeCtrl'，['$scope'，函数（$scope）{
var firstnames=['Laurent'，'Blandine'，'Olivier'，'Max']；
var lastnames=['Renard'，'Faivre'，'Frere'，'Eponge']；
风险值日期=['1987-05-21'，'1987-04-25'，'1955-08-27'，'1966-06-06']；
var-id=1；
函数生成器域项（id）{
var firstname=firstname[Math.floor（Math.random（）*3）]；
var lastname=lastnames[Math.floor（Math.random（）*3）]；
var birthdate=日期[Math.floor（Math.random（）*3）]；
var balance=Math.floor（Math.random（）*2000）；
返回{
id:id，
名字：名字，
lastName:lastName，
生日：新日期（生日），
平衡：平衡
}
}
$scope.rowCollection=[]；
对于（id；id<5；id++）{
$scope.rowCollection.push（generateRandomItem（id））；
}
//添加到真实数据持有者
$scope.addRandomItem=函数addRandomItem（）{
$scope.rowCollection.push（generateRandomItem（id））；
id++；
};
//移到真实数据保持器上
$scope.removietem=函数removietem（行）{
var index=$scope.rowCollection.indexOf（行）；
如果（索引！=-1）{
$scope.rowCollection.splice（索引，1）；
}
}
}]);

我使用的是visual studio 2017。现在页面很奇怪，因为数据没有绑定。有人能帮我吗？我真的很困惑…谢谢。

你重复了错误的集合。应该是rowCollection，而不是displayedCollection。

哦，链接是

    <!DOCTYPE html>
<html ng-app="myApp">

<head>
    <meta charset="utf-8" />
    <title></title>     
</head>
<body>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular.js"></script>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="smart-table.debug.js"></script>
    <script src="lrInfiniteScrollPlugin.js"></script>

    <div ng-controller="safecCtrl">

        <button type="button" ng-click="addRandomItem(row)" class="btn btn-sm btn-success">
            <i class="glyphicon glyphicon-plus">
            </i> Add random item
        </button>

        <table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
            <thead>
                <tr>
                    <th st-sort="firstName">first name</th>
                    <th st-sort="lastName">last name</th>
                    <th st-sort="birthDate">birth date</th>
                    <th st-sort="balance">balance</th>
                </tr>
                <tr>
                    <th colspan="5"><input st-search="" class="form-control" placeholder="global search ..." type="text" /></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="row in displayedCollection">
                    <td>{{row.firstName}}</td>
                    <td>{{row.lastName}}</td>
                    <td>{{row.birthDate}}</td>
                    <td>{{row.balance}}</td>
                    <td>
                        <button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
                            <i class="glyphicon glyphicon-remove-circle">
                            </i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>


</body>
</html>



    app.controller('safeCtrl', ['$scope', function ($scope) {

    var firstnames = ['Laurent', 'Blandine', 'Olivier', 'Max'];
    var lastnames = ['Renard', 'Faivre', 'Frere', 'Eponge'];
    var dates = ['1987-05-21', '1987-04-25', '1955-08-27', '1966-06-06'];
    var id = 1;

    function generateRandomItem(id) {

        var firstname = firstnames[Math.floor(Math.random() * 3)];
        var lastname = lastnames[Math.floor(Math.random() * 3)];
        var birthdate = dates[Math.floor(Math.random() * 3)];
        var balance = Math.floor(Math.random() * 2000);

        return {
            id: id,
            firstName: firstname,
            lastName: lastname,
            birthDate: new Date(birthdate),
            balance: balance
        }
    }

    $scope.rowCollection = [];

    for (id; id < 5; id++) {
        $scope.rowCollection.push(generateRandomItem(id));
    }

    //add to the real data holder
    $scope.addRandomItem = function addRandomItem() {
        $scope.rowCollection.push(generateRandomItem(id));
        id++;
    };

    //remove to the real data holder
    $scope.removeItem = function removeItem(row) {
        var index = $scope.rowCollection.indexOf(row);
        if (index !== -1) {
            $scope.rowCollection.splice(index, 1);
        }
    }
}]);