为什么元素不是dynamic添加在angular
我正在尝试使用ng-repeat
dynamic添加数据。 我不知道为什么不加。 我input数据中dynamic添加的“名称”,但不显示在用户界面中。 这里是一个演示
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); } }); }; }])
bootbox是一个外部库,它并不知道angularjs已经消化周期来保持视图是最新的。
plunkr在这里
只要修改你的代码就可以了:
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 }); };
可选的
为了避免以后再回到另一个问题,您必须每次为student
在您的bootbox
的callback函数范围内创build一个对象,以避免在您的studentDetail
数组中多次推送相同的对象。
结果你的最终代码看起来像这样:
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 }); }; }]);
这条线
scope.studentDetail.push(student);
在angular度以外执行,所以angular度不知道studentDetail已经改变。 你可以使用scope。$ apply()来询问angular度来检查更改
scope.$apply(function() { scope.studentDetail.push({ name: res }); });
你的代码的另一个问题是你在控制器里声明一个variables学生。 所以每当你把它推入scope.studentDetail,你实际上是再次推动相同的对象,这将导致错误重复。 我改变了上面的代码,每次推新对象
- 使用multer,ng-file-upload,angular和node将dynamic表单数据绑定到每个file upload多个文件
- Heroku和angular度路由
- 如何在express js中添加'res.addHeader(“Access-Control-Allow-Origin”,“*”)?
- 使用angular度转换处理API错误的最佳做法
- 咕嘟咕嘟咕嘟咕咕地
- Karma的angular度testing:“模块没有定义”
- Socket.io从Express控制器发出
- 我想从多个文本input采取input,并将其发送到我的数据库,但只有最后一个input发送
- 我怎么做一个Ctrl +点击量angular器?