如何角JS智能表编辑内容 [英] How to edit contents in Angular js Smart Table
问题描述
我很新的Java脚本,因此,如果这似乎基本我必须道歉。
如何修改行的表在智能表Angularjs?似乎没有要与新的智能表的教程。我想创建一个简单的形式,为用户输入打开一个特定的地方的时间。
我创建的按钮,可以在桌子上添加和删除行,但是当我更新的对象,当我在CONTENTEDITABLE =真正的没有变化添加持久保存。据我所知,CONTENTEDITABLE是一个特定的HTML5参数独立智能表,但我不知道我还能怎么更新数据或我怎么能检索更新的数据。
的数据被从angularjs控制器经由mean.js路由检索
< DIV CLASS =控制>
<表ST表=place.openHours级=表的表条纹>
<&THEAD GT;
&所述; TR>
<第i白天< /第i
<第i个开放时间和LT; /第i
<第i个截止时间和LT; /第i
< / TR>
< / THEAD>
<&TBODY GT;
< TR NG重复=行place.openHoursCONTENTEDITABLE =真>
&所述; TD> {{row.day}}&下; / TD>
&所述; TD> {{row.open}}&下; / TD>
&所述; TD> {{row.close}}&下; / TD>
<按钮式=按钮NG点击=removeOpenHour(行)级=BTN BTN-SM BTN-危险>
< I类=glyphicon glyphicon-删除圈>
< I&GT /;
< /按钮>
< / TR>
< / TBODY>
< /表> <按钮式=按钮NG点击=addOpenHour(行)级=BTN BTN-SM BTN-成功>
< I类=glyphicon glyphicon加>
< I&GT /;添加新行
< /按钮>
< / DIV>
在JavaScript的:
$ scope.removeOpenHour =功能removeOpenHour(行){
VAR指数= $ scope.place.openHours.indexOf(行);
如果(指数!== -1){
$ scope.rowCollection.splice(指数,1);
}
} $ scope.addOpenHour =功能addOpenHour(){
$ scope.place.openHours.push(
{
天:周一,
打开:540,
关闭:1080
});
};
感谢我身边有一个外观和使用的code从这里的 http://jsfiddle.net/bonamico/cAHz7/ 并与我的code合并了。
HTML文件:
< TR NG重复=行place.openHours>
< TD>< DIV CONTENTEDITABLE =真正的NG-模式=row.day> {{row.day}}< / DIV>< / TD>
< TD>< DIV CONTENTEDITABLE =真正的NG-模式=row.open> {{row.open}}< / DIV>< / TD>
< TD>< DIV CONTENTEDITABLE =真正的NG-模式=row.close> {{row.close}}< / DIV>< / TD>
&所述; TD>
<按钮式=按钮NG点击=removeOpenHour(行)级=BTN BTN-SM BTN-危险>
< I类=glyphicon glyphicon-删除圈>
< I&GT /;
< /按钮>
< / TD>
JS文件:
myApp.directive('CONTENTEDITABLE',函数(){
返回{
要求:'ngModel',
链接:功能(范围,榆树,ATTRS,CTRL){
//视图 - >模型
elm.bind('模糊',函数(){
范围。$应用(函数(){
。CTRL $ setViewValue(elm.html());
});
}); //模型 - >视图
ctrl.render =功能(值){
elm.html(值);
}; elm.bind('的keydown',函数(事件){
的console.log(的keydown+ event.which);
VAR ESC = event.which == 27,
EL = event.target; 如果(ESC){
的console.log(ESC);
。CTRL $ setViewValue(elm.html());
el.blur();
。事件preventDefault();
} }); }
};
});
I am quite new to java script, so I must apologise if this seems basic.
How can I edit rows tables in Smart-Table with Angularjs? There doesn't seem to be a tutorial with the new Smart-Table. I would like to create a simple form for users to enter the hours open for a particular place.
I have created buttons which can add and remove rows on the table, but when I add in contenteditable="true" none of the changes are persisted when I update the object. I understand that the contenteditable is a specific html5 parameters independent of smart-table, but I don't understand how else I can update the data or how I could retrieve the updated data.
The data is retrieved from the angularjs controller via the mean.js routes.
<div class="controls">
<table st-table="place.openHours" class="table table-striped">
<thead>
<tr>
<th>Day</th>
<th>Opening Time</th>
<th>Closing Time</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in place.openHours" contenteditable="true" >
<td>{{row.day}}</td>
<td>{{row.open}}</td>
<td>{{row.close}}</td>
<button type="button" ng-click="removeOpenHour(row)" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-remove-circle">
</i>
</button>
</tr>
</tbody>
</table>
<button type="button" ng-click="addOpenHour(row)" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Add new Row
</button>
</div>
Inside the javascript:
$scope.removeOpenHour = function removeOpenHour(row) {
var index = $scope.place.openHours.indexOf(row);
if (index !== -1) {
$scope.rowCollection.splice(index, 1);
}
}
$scope.addOpenHour = function addOpenHour() {
$scope.place.openHours.push(
{
day: 'Monday',
open: 540,
close: 1080
});
};
Thanks I had a look around and used the code from here http://jsfiddle.net/bonamico/cAHz7/ and merged it with my code.
HTML file:
<tr ng-repeat="row in place.openHours">
<td><div contentEditable="true" ng-model="row.day">{{row.day}}</div></td>
<td><div contentEditable="true" ng-model="row.open">{{row.open}}</div></td>
<td><div contentEditable="true" ng-model="row.close">{{row.close}}</div></td>
<td>
<button type="button" ng-click="removeOpenHour(row)" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-remove-circle">
</i>
</button>
</td>
JS file:
myApp.directive('contenteditable', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
// view -> model
elm.bind('blur', function() {
scope.$apply(function() {
ctrl.$setViewValue(elm.html());
});
});
// model -> view
ctrl.render = function(value) {
elm.html(value);
};
elm.bind('keydown', function(event) {
console.log("keydown " + event.which);
var esc = event.which == 27,
el = event.target;
if (esc) {
console.log("esc");
ctrl.$setViewValue(elm.html());
el.blur();
event.preventDefault();
}
});
}
};
});
这篇关于如何角JS智能表编辑内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!