Question

我正在尝试使用ng-repeat动态添加数据。我不知道为什么不添加。我输入在数据中动态添加的“名称”，但它没有在UI中显示。这是demo

app.controller("studentcntr", ['$scope', function(scope) {
    scope.studentDetail = [];
    var student = {
        name: ''
    };

    scope.addStudent = function() {
        bootbox.prompt("Enter Name!", function(res){
            if (res == null) {

            } else {
                student.name = res;
                scope.studentDetail.push(student);
            }
        });
    };
}])

Answer 1

这一行

scope.studentDetail.push(student);

在angular之外执行，因此angular不知道studentDetail已经被更改。您可以使用范围。$ apply（）来询问角度以检查更改

scope.$apply(function() {
    scope.studentDetail.push({
        name: res
    });
});

您的代码的另一个问题是您在控制器内声明了一个变量学生。所以每次你把它推到scope.studentDetail中，你实际上是再次推动同一个对象，这将导致ng-repeat错误。我在上面的代码中改变了每次推送新对象

Answer 2

bootbox是一个外部库，它不知道angularjs有消化周期来保持视图是最新的。

<强> plunkr here

只需像这样修改你的代码：

scope.addStudent=function(){
        bootbox.prompt("Enter Name!",function(res){
            if(res==null){

            }else {
                student.name=res;
                scope.studentDetail.push(student);
            }

            scope.$digest(); // here is the new line to update models
        });


    };

OPTIONAL

为避免您稍后再回到另一个问题，您必须每次在student的回调函数范围内为bootbox创建一个对象，以避免在studentDetail的{{1}}中多次推送同一个对象{1}}数组。

因此，您的最终代码可能如下所示：

app.controller("studentcntr",['$scope',function(scope){
    scope.studentDetail=[];

    // I removed var student

    scope.addStudent=function(){
        bootbox.prompt("Enter Name!",function(res){
            if (res == null) {

            } else {
                scope.studentDetail.push({ name: res });
            }

            scope.$digest(); // here is the new line to update models
        });

    };
}]);

为什么元素没有以角度动态添加

2 个答案:

OPTIONAL