如何角JS智能表编辑内容 [英] How to edit contents in Angular js Smart Table
问题描述
我很新的Java脚本，因此，如果这似乎基本我必须道歉。
如何修改行的表在智能表Angularjs？似乎没有要与新的智能表的教程。我想创建一个简单的形式，为用户输入打开一个特定的地方的时间。
我创建的按钮，可以在桌子上添加和删除行，但是当我更新的对象，当我在CONTENTEDITABLE =真正的没有变化添加持久保存。据我所知，CONTENTEDITABLE是一个特定的HTML5参数独立智能表，但我不知道我还能怎么更新数据或我怎么能检索更新的数据。
的数据被从angularjs控制器经由mean.js路由检索
＆LT; DIV CLASS =控制＆GT;
＆LT;表ST表=place.openHours级=表的表条纹＆GT;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
＆LT;第i白天＆LT; /第i
＆LT;第i个开放时间和LT; /第i
＆LT;第i个截止时间和LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
＆LT; TR NG重复=行place.openHoursCONTENTEDITABLE =真＆GT;
＆所述; TD＆GT; {{row.day}}＆下; / TD＆GT;
＆所述; TD＆GT; {{row.open}}＆下; / TD＆GT;
＆所述; TD＆GT; {{row.close}}＆下; / TD＆GT;
＆LT;按钮式=按钮NG点击=removeOpenHour（行）级=BTN BTN-SM BTN-危险＆GT;
＆LT; I类=glyphicon glyphicon-删除圈＆GT;
＆LT; I＆GT /;
＆LT; /按钮＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt; ＆LT;按钮式=按钮NG点击=addOpenHour（行）级=BTN BTN-SM BTN-成功＆GT;
＆LT; I类=glyphicon glyphicon加＆GT;
＆LT; I＆GT /;添加新行
＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
在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文件：
＆LT; TR NG重复=行place.openHours＆GT;
＆LT; TD＆GT;＆LT; DIV CONTENTEDITABLE =真正的NG-模式=row.day＆GT; {{row.day}}＆LT; / DIV＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; DIV CONTENTEDITABLE =真正的NG-模式=row.open＆GT; {{row.open}}＆LT; / DIV＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; DIV CONTENTEDITABLE =真正的NG-模式=row.close＆GT; {{row.close}}＆LT; / DIV＆GT;＆LT; / TD＆GT;
＆所述; TD＆GT;
＆LT;按钮式=按钮NG点击=removeOpenHour（行）级=BTN BTN-SM BTN-危险＆GT;
＆LT; I类=glyphicon glyphicon-删除圈＆GT;
＆LT; I＆GT /;
＆LT; /按钮＆GT;
＆LT; / TD＆GT;
JS文件：
myApp.directive（'CONTENTEDITABLE'，函数（）{
返回{
要求：'ngModel'，
链接：功能（范围，榆树，ATTRS，CTRL）{
//视图 - ＆GT;模型
elm.bind（'模糊'，函数（）{
范围。$应用（函数（）{
。CTRL $ setViewValue（elm.html（））;
}）;
}）; //模型 - ＆GT;视图
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屋！
